stacking divs -- mix of vertical and horizontal layout - html

Question

I would like to accomplish a mix of horizontal and vertical layouts.
<div>
<div>
<span>A</span>
<span>B</span>
<span>C</span>
</div>
<div>
<span>D</span>
</div>
</div>
#1 It should look like this
A B C
<- D ->
#2 Instead I have the two div elements next to one another
A B C <- D ->
The real example has some very bad CSS that I recommend you not look at. I wanted to set the top three items to the same width of 25px and to be arranged next to one another. And a picture beneath the two control buttons.
For some reason, the div elements are not stacking on top of one another and instead sitting next to each other all in one row. Please help!
<div>
<div>
<button style="width: 25px; float: left;">-</button>
<span style="width: 25px; float: left; text-align: center;">0</span>
<button style="width: 25px; float: left;">+</button>
</div>
<div>
<img src="starry-night.jpg" width="500">
</div>
</div>

Answer 1

HTML:
<div>
<div>
<span>A</span>
<span>B</span>
<span>C</span>
</div>
<div>
<span>D</span>
</div>
</div>
CSS:
div {
width: 100%;
}
div > div {
display: flex; /* pertinent */
width: 100%;
}
div > div > span {
width: 33%; /* pertinent */
justify-content: center; /* pertinent */
margin: 1px auto; /* pertinent */
background: #333;
text-align:center;
color:#efefef;
font-family: sans-serif;
}
https://jsfiddle.net/16dqk7cL/1/

Answer 2

Give a width of 75 px to the parent div so that after placing 3, 25px elements the next element will be forced to be on the new line.
<div style="width: 75px;">
<div>
<button style="width: 25px; float: left;">-</button>
<span style="width: 25px; float: left; text-align: center;">0</span>
<button style="width: 25px; float: left;">+</button>
</div>
<div>
<img src="starry-night.jpg" width="500">
</div>
</div>

Answer 3

One of the possible solutions is to have a container Div and specify a width for it. Then adjust your other Divs width based on it.
<div style="width: 300px">
<div style="width=100%;">
<button style="width: 33%; float: left;">-</button>
<span style="width: 33%; float: left; text-align: center;">0</span>
<button style="width: 33%; float: left;">+</button>
</div>
<div style="width: 150px; margin:auto">
<img src="starry-night.jpg" style="width: 150px;">
</div>
</div>