How to create two div elements with same height side by side in CSS?

By IncludeHelp Last updated : November 13, 2023

Tow DIVs with the same height side by side can be placed within a container. But their heights will be different based on the content. To make them of the same height, we use flex properties. This tutorial will explain how you make two DIVs of the same height inside a container (div).

Create two div elements with same height side by side

For this purpose, set the display property to flex value on the container element (parent element) to make the equal height of the child container and set flex property to 1 value to the child elements for equal width.

Steps

Step 1: Add HTML

Use a container DIV element, and then place two DIVs inside them.

<div>
  <div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <div>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
</div>

Step 2: Create a CSS style

Write CSS styles for parent and child containers.

.parentDIV {
  display: flex;
  /* to set equal height of the child elements */

  border: solid 1px #006969;
  padding: 8px;
}

.childDIVs {
  flex: 1;
  /* to set equal width */

  background-color: #f90;
  color: #fff;
  padding: 8px;
  margin: 8px;
}

Step 3: Use CSS classes

Now, use the CSS class with the parent and child containers.

<div class="parentDIV">
  <div class="childDIVs">
  </div>
  <div class="childDIVs">
  </div>
</div>

Example

Consider this example. This example demonstrates how to create two div elements with same height side by side in CSS.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
      body{	
      margin: auto;
      max-width: 1024px;
      }
      .parentDIV{	
      display: flex; /* to set equal height of the child elements */
      border: solid 1px #006969;
      padding: 8px;	
      }
      .childDIVs{	
      flex: 1; /* to set equal width */
      background-color: #f90;
      color: #fff;
      padding: 8px;
      margin:	8px;
      }	
    </style>
  </head>
  <body>
    <h1>Example to create two div elements with same height side by side</h1>
    <div class="parentDIV">
      <div class="childDIVs">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
      <div class="childDIVs">
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
      </div>
    </div>
  </body>
</html>

Output

The output of the above example is:

create two div elements with same height side by side

How to center a table using CSS?

How to make a div have a fixed width using CSS?