How to create two div elements with same height side by side in CSS?
Two divs can be placed side by side on the webpage with the same height. It can be done by using the CSS flexbox and table properties.
In this tutorial, we will be using CSS properties to place two divs side by side with the same height.
Using flexbox properties
The first way to place two divs side by side is by using the CSS flex property. Add display:flex value on the container element for the equal height of the children and flex:1 to the child element for equal width.
Example: Add two divs side by side using flexbox properties
In this program, we have added two divs of equal height and width using flexbox properties. We have also added some padding, margin and border to the div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
margin: 2px;
}
</style>
</head>
<body>
<h2> Align two div side by side </h2>
<div class="row">
<div class="col">Here we have placed two div side by side with equal height and width</div>
<div class="col">Here we have placed two div side by side with equal height and width</div>
</body>
</html>
Output
Here is the output of the above program.
Using table properties
Another way to place two divs side by side with the same height is by using table properties. We will use display: table* to the parent container and display: table-cell to the child element.
Example: Program to place two div side by side using table properties
Here in this program, we have used table properties to place two div side by side with equal height.
Conclusion
In this tutorial, we have learned about the CSS properties which are used to place two divs side by side with equal height. We used flexbox properties and table properties to do so with simple examples.
