display two divs side by side flexbox

1.float-container {
2    border: 3px solid #fff;
3    padding: 20px;
4}
5
6.float-child {
7    width: 50%;
8    float: left;
9    padding: 20px;
10    border: 2px solid red;
11}
12<div class="float-container">
13
14  <div class="float-child">
15    <div class="green">Float Column 1</div>
16  </div>
17  
18  <div class="float-child">
19    <div class="blue">Float Column 2</div>
20  </div>
21  
22</div>

1.grid-container {
2    display: grid;
3    grid-template-columns: 1fr 1fr;
4    grid-gap: 20px;
5}