How to place two div side-by-side of the same height using CSS?

20 May, 2021
The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below:  
display:table; This property is used for elements (div) which behaves like table.
display:table-cell; This property is used for elements (div) which behaves like td.
display:table-row: This property is used for elements (div) which behaves like tr.
Example 1:  
html
<!DOCTYPE html><html>    <head>        <style>            h1 {                text-align:center;                color:green;            }            body {                width:70%;            }            .container .box {               display : flex;              flex-direction : row;                           }                              .container .box .box-cell.box1 {                background:green;                color:white;                text-align:justify;             }            .container .box .box-cell.box2 {                background:lightgreen;                text-align:justify            }        </style>    </head>    <body>        <h1>GeeksforGeeks</h1>        <div class="container">            <div class="box">                <div class="box-row">                    <div class="box-cell box1">                    It is a good platform to learn programming. It is an                    educational website. Prepare for the Recruitment drive                    of product based companies like Microsoft, Amazon,                    Adobe etc with a free online placement preparation                    course. The course focuses on various MCQ's & Coding                    question likely to be asked in the interviews & make                    your upcoming placement season efficient and successful.                    </div>                    <div class="box-cell box2">                    Also, any geeks can help other geeks by writing articles                    on the GeeksforGeeks, publishing articles follow few                    steps that are Articles that need little modification/                    improvement from reviewers are published first. To                    quickly get your articles reviewed, please refer                    existing articles, their formatting style, coding                    style, and try to make you are close to them.                    </div>                </div>            </div>        </div>    </body></html>                   
Output:  
Example 2: This example contains multiple number of div put into side-by-side using CSS.  
html
<!DOCTYPE html><html>    <head>        <style>            .container .box {                width:540px;                margin:50px;                display:table;            }            .container .box .box-row {                display:table-row;            }            .container .box .box-cell {                display:table-cell;                border:1px solid black;                width:25%;                padding:10px;            }        </style>    </head>    <body>        <div class="container">            <div class="box">                <div class="box-row">                    <div class="box-cell box1">                        <img src=    "https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-90-2.png" alt="" />                    </div>                    <div class="box-cell box2">                        <img src=    "https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-91-2.png" alt="" />                    </div>                    <div class="box-cell box3">                        <img src=    "https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-94-3.png" alt="" />                    </div>                    <div class="box-cell box4">                        <img src=    "https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-95-2.png" alt="" />                    </div>                </div>            </div>        </div>    </body></html>                   
Output:  
 
iamonlyhimanshusharma
CSS-Misc
Picked
Technical Scripter 2018
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.