Why does this DIV container not resize consistently? - html

Question

As this fiddle shows, I have an outer DIV with an inner DIV on the left and two inner SPANS. I want the two SPANS to sit next to the DIV but if I separate them with a BR the outer DIV only resizes based on the width of the first SPAN. If the second SPAN is narrower than the first it sits in the correct position. If it is wider than the first 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>

Answer 1

Your code is behaving exactly as it should have been. You have mentioned inline-block for imageContainer and other spans. That means if there is enough space within current line - that inner div imageContainer and other span will try to fit and if not enough space - span will fall to next line subsequently the last and then the first span.
Recommended approach is to structure your code properly in following manner:
<div class="outer">
<div class="img"> <!-- you can use inline-block or float (must have width) -->
Put image here
</div>
<div class="content"> <!-- you can use inline-block or float (must have width) -->
Put your spans here.
</div>
</div>