css side by side

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<div style="width: 100%; display: table;">
2    <div style="display: table-row">
3        <div style="width: 600px; display: table-cell;"> Left </div>
4        <div style="display: table-cell;"> Right </div>
5    </div>
6</div>

1
2/************ How to position elements side by side? ***************/
3
4/* We can use the property "display: inline" to place blocks of elements 
5side by side, however, this does not allow an aesthetic alignment of all 
6elements and we can't position a stack or group of two or more blocks 
7beside another block. For example, placing a header and a paragraph on 
8the left side of an image. For that, we use the "float" property.
9This tells the other elements to make room for the element that is 
10"floating" in a certain position, with the minimum disturbance to the 
11flow of the document (packing everything tightly) */
12
13img {
14  float: left;   /* The image will float on the left side of the text*/
15}
16
17h3 {
18  text-align: left;
19}
20
21p {
22  text-align: left;  
23}
24
25
26/****************** How to isolate this effect? **********************/
27
28/* For example, in case we want to keep the image and the header side 
29by side, but making sure the paragraph is kept below the image. In this 
30case, we can simply use a property that will prevent that any other 
31element can be placed on the left of the <p> element. That way, as the 
32pieces are stack throughout the document, the browser will simply put 
33the <p> element below the "floating" image. */
34
35img {
36  float: left;
37}
38
39h3 {
40  text-align: left;
41}
42
43p {
44  text-align: left;
45  clear: left;     /* This will stop any other element from being placed on it's left side */
46}
47
48
49
50

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