Upon viewing this demo, it becomes evident that there is an outer DIV containing an inner DIV on the left side with two inner SPANS. The challenge lies in positioning the two SPANS next to the DIV. If a line break (BR) is used to separate them, the width of the outer DIV adjusts based only on the first SPAN's width. In cases where the second SPAN is narrower than the first one, it aligns correctly. However, if it is wider, it drops below the inner DIV.
CSS and HTML:
#wrapper {
border: 2px solid blue;
display: inline-block;
}
#imageContainer {
border: 1px solid red;
background-color: yellow;
display: inline-block;
height: 60px;
width: 60px;
}
.slab {
display: inline-block;
}<div id="wrapper">
<div id="imageContainer">
Image
</div>
<span id="line1" class="slab">Sample Text</span>
<br>
<span id="line2" class="slab">Sample Text 2</span>
</div>