Button align arrow at the right of div

Question

So im trying to have a button that has an arrow which aligns at the end of a box.

.profile-box {
  border: 1px solid #2E2E2E;
  border-radius: 0.5vw;
  width: 15vw;
  font-family: 'Open Sans', sans-serif;
  padding: 2vw;
  text-align: left;
  margin: 1vw;
}

.box-title {
  font-weight: bold;
  margin-bottom: 1vw;
}

.box-btn {
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 1vw;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

<div class="profile-box">
  <div class="box-title"> My orders </div>
  <button class="box-btn">
                    View orders
                    <i class="arrow"></i>
                </button>

The problem is that right now the arrow is aligned next to the text rather than to the right of the box. Any suggestions?

Answer 1

Use flexbox to space the text and icon. Also I changed your HTML to use semantic HTML. I changed your meaningless div to a meaningful h2 element, change this to whatever heading you need here.

.profile-box {
  border: 1px solid #2E2E2E;
  border-radius: 0.5vw;
  width: 15vw;
  font-family: 'Open Sans', sans-serif;
  padding: 2vw;
  text-align: left;
  margin: 1vw;
}

.box-title {
  font-weight: bold;
  margin-bottom: 1vw;
}

.box-btn {
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 1vw;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

<div class="profile-box">
  <h2 class="box-title"> My orders </h2>
  <button class="box-btn">
    View orders
    <i class="arrow"></i>
  </button>
</div>