The challenge I am facing involves having an image and text on it in two separate divs with a background color. The length of the text in one div is long while the text in the second div is short, but I want to ensure that the width of both divs are equal. Below is my current code snippet:
.banner{
position: relative;
}
.banner img{
width: 100%;
}
.image-text{
position: absolute;
top: 40%;
left: 8%;
}
.image-text h2{
font-size: 22px;
font-weight: bolder;
color: #fff;
margin: 0px;
}
.upper-text{
background: #2b96c3;
padding: 5px 10px;
}
.lower-text{
background: #0d729c;
padding: 5px 10px;
}<section>
<div class="banner">
<img src="https://i.imgur.com/xTeFbiv.jpg">
<div class="image-text">
<div class="upper-text">
<h2>Excellent Successfull</h2>
</div>
<div class="lower-text">
<h2>Sustainable</h2>
</div>
</div>
</div>
</section>I am aiming for a desired output similar to the attached picture referenced here:
https://i.sstatic.net/MxDYC.jpg.
Despite trying various techniques, I am still unable to achieve the desired result.