In this solution we use display:
flex style property for our wrapping <div> element,
so in both children divs we can set flex: property
value with 1 to display two equal size <div> elements n
ext to each other.
ex :
<html>
<head>
<style>
div {
border: 1px solid red;
}
div.container {
display: flex; /* <---------- required */
}
div.child {
flex: 1; /* <---------------- required */
}
</style>
</head>
<body>
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
</div>
</body>
</html>