Make a div the size of its content - html

Question

I'm working on some HTML where some divs are all lined up when the screen is wide, then they stack and float left or right when the screen is small.
They have some space above and below when the screen is wide, but the problem is that top and bottom margin seems to disappear when the screen is thinner and they stack. When I inspect the element in Firefox, it says the outer divs are smaller than the content, which I'm guessing has something to do with the problem.
Here's a jsfiddle of my code. Change the Result window width to see it change.
Here's the code
<div id="controls">
<div id="control_left">
<div id="play_button" class="button">play</div>
<div id="step_button" class="button">step</div>
</div>
<div id="control_right">
<div id="stop_button" class="button">stop</div>
<div id="restart_button" class="button">restart</div>
</div>
<br/>
</div>
<div id="instruction1" class="instruction top_instruction">
<div class="instructionNumber"></div>
<div class="instructionType">
<FORM NAME="myform">
<SELECT NAME="mylist">
<OPTION VALUE="m1">VAL1
<OPTION VALUE="m2">VAL2
<OPTION VALUE="m3">VAL3
</SELECT>
</FORM>
</div>
<input class="reg" type="text" />
<input class="reg" type="text" />
<input class="reg" type="text" />
</div>
#play_button {
float: left;
}
#step_button {
float: right;
}
#stop_button {
float: left;
}
#restart_button {
float: right;
}
.button {
text-align: center;
width: 45%;
background-color: #aaa;
cursor: pointer;
box-sizing: border-box;
}
#controls {
margin-top: 5px;
margin-bottom: 5px;
box-sizing: border-box;
height: auto;
width: auto;
}
#control_left {
box-sizing: border-box;
height: auto;
width: auto;
}
#control_right {
box-sizing: border-box;
height: auto;
width: auto;
}
#media screen and (min-width: 600px) {
#control_left {
float: left;
width: 45%;
}
#control_right {
float: right;
width: 45%;
}
}
.instruction{
width: 100%;
font-family:courier;
font-weight:bold;
margin-right: auto;
margin-left: auto;
border-right: 2px solid #000000;
border-left: 2px solid #000000;
border-bottom: 2px solid #000000;
display: inline-block;
}
.top_instruction{
border-top: 2px solid #000;
}
How do I get space below beneath the controls div, and beneath each button when they stack?

Answer 1

Just give the div a margin.
div {
margin:2%;
}
Demo
more apt will be applying margin for the button class
.button{
margin:2%;
}

Answer 2

add the margin attribute to the button class
.button {
text-align: center;
/*border-radius: 1%;*/
width: 45%;
background-color: #aaa;
cursor: pointer;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 5px;
}

Answer 3

You can use 'margin' to create space between buttons as they stack. Add this line off CSS to your buttons.
.button {
margin: 2%; /*you can increase or decrease this percentage*/
}
This will add space between your buttons.