.content {
float: left;
width: 33.33%;
font-weight: bold;
text-align: center;
margin-top: 5px;
margin-bottom: 2px;
overflow-wrap: break-word;
}
.content_div {
position: absolute;
width: 100%;
left: 0;
top: 100%;
font-size: 16px
}
.title {
float: left;
width: 100%;
font-weight: bold;
text-align: center;
margin-top: 5px;
margin-bottom: 2px;
overflow-wrap: break-word;
}
.title_div {
position: relative;
width: 100%;
left: 0;
top: 0;
font-size: 20px
}<div style="position: relative; float:left;">
<div class="title_div">
<p class="title">801 BAOER BLACK ROLLER PEN</p>
</div>
<img src="http://52.66.90.164/Show_barcode">
<div class="content_div">
<p class="content">52305</p>
<p class="content">Packet</p>
<p class="content">MRP: 300</p>
</div>
</div>The layout needs to be modified so that the title and content width match the image they are displayed alongside. If the title is removed, the content width adjusts to the image size but not the title. How can I ensure that the title width matches the image size without changing the overall layout? Solutions involving adding an absolute position in the parent div have led to undesired layout changes. Any suggestions on how to resolve this issue?