You can place two DIVs side by side with the same height using the CSS display: flex property. Here’s an example of how to do this:

HTML:

<div class="container">
    <div class="div1">
        Content 1
    </div>
    <div class="div2">
        Content 2
    </div>
</div>

CSS:

.container {
    display: flex; /* set container to flex */
    align-items: stretch; /* stretch items to fill container */
}
.div1, .div2 {
    flex: 1; /* divide container equally among items */
}

This will create a container div with two child divs inside it. The container div has the display: flex property set, which makes it a flex container and the child divs will be flex items.

The align-items: stretch property is used on the container so that the child divs will be stretched to fill the height of the container.

The flex: 1 property is set on the child divs, which means that the container will be divided equally among the child divs. So both the child divs will have the same height.

You can adjust the value of flex property to make the divs different width or you can use the width property to set a specific width for each div.

You can also use other CSS properties such as justify-content and align-content to adjust the layout of the divs inside the container.

Also Read:

Categorized in:

HTML & CSS

Tagged in:

,