Button align arrow at the right of div - html

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>