Rows of divs not lining up correctly - css

Question

Question regarding styling. I have a row of div elements. They're all the same size except one, which is double in height and width. I'd like the second row of div elements to line up with the second half of the bigger div but now sure how to do it.
.wrapper {
width: 800px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.box {
height: 50px;
width: 50px;
margin: 5px;
border: 1px solid black;
}
.box-5 {
height: 100px;
width: 100px
}
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>
I'd like box 13 - 16 to be on the left side of the bottom half of box 5 and box 17 - 19 to be on the right side.

Answer 1

You could use CSS display: grid and its companion grid-template-columns to fix this. Updated answer thanks to Maaz Syed Adeeb's comment.
grid-template-columns: repeat(13, auto);
(It should be thirteen instead of 12 boxes).
Only box number 5 gets an upgrade in styling to expand its box:
grid-column: span 2;
grid-row: span 2;
Read more about grid at MDN.
Updated snippet:
.wrapper {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(13, auto);
grid-template-rows: auto;
grid-gap: 0;
}
.box {
height: 50px;
width: 50px;
margin: 5px;
border: 1px solid black;
}
.box-5 {
height: 100px;
width: 100px;
grid-column: span 2;
grid-row: span 2;
}
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>

Answer 2

Just need to add 10 more pixel in width
.box-5 {
height: 100px;
width: 110px;
}
.wrapper{
width: 800px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.box{
height: 50px;
width: 50px;
margin: 5px;
border: 1px solid black;
}
.box-5 {
height: 100px;
width: 110px;
}
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>