Styling text on image - html

Question

I have an image and text on it in two different divs with a background color,
text in one div is long and in the second div is short but the width of both divs are equal that is I don't want.
Here is my code:
.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>
All I need is like in the picture attached desired output:
.
I tried many tricks but not understand how to do this.

Answer 1

Make the display of the second div inline-block so it doesn't span 100% width.
Heres an example:
.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;
display: inline-block;
}
<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>