How do I keep two side-by-side div elements the same height?

HTML Web Development Front End Technology

We need to keep the two side-by-side div the same height, so that if more content is added to any of the div, the size of the other div matches it. The following two examples are covered −

Keep two side-by-side div elements the same height using HTML
Keep two side-by-side div elements the same height using JavaScript

Let us see the example one by one −

Keep two side-by-side div elements the same height using HTML

Example

We will use the following code to keep two side-by-side div elements the same height -

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{
         display: table-row;
      }
      .box1{
         display: table-cell;
         background: red;
         color: white;
      }

      .box2{
         display: table-cell;
         background: orange;
         color: white;
      }        
   </style>
</head>
<body>
<h1>Two Divs</h1>
<div class = "container">
   <div class ="box1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
   </div>
   <div class = "box2">
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
   </div>
</div>
</body>
</html>

Output

Add more content to the 2^nd div and you can see the size of both the divs will increase −

Output

Keep two side-by-side div elements the same height using JavaScript

Example

We will use the following code to keep two side-by-side div elements the same height using JavaScript. The height() is used to match the height of both the divs −

<!DOCTYPE html>
<html>
<head>
   <style>
      .box1{
         display: table-cell;
         background: red;
         color: white;
      }

      .box2{
         display: table-cell;
         background: orange;
         color: white;
      }        
   </style>
</head>
<body>
   <div class ="box1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
   </div>
   <div class = "box2">
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
   </div>
   <script>
      $(".box2").height($(".box1").height());
   </script>
</body>
</html>