Sub-heading is displayed inline - html

Question

Here is my code:
.head {
background-color: #EBEBEB;
height: 40px;
}
h3 {
display: inline;
padding: 8px 0px 0px 10px;
width: 45%;
}
#underFruits {
font-size: 12px;
}
.right {
float: right;
}
.btn {
width: 36px;
height: 36px;
display: inline-block;
cursor: pointer;
border: 1px red solid;
}
<div class="head">
<h3>Fruits</h3>
<span id="underFruits">Put me Under Fruits</span>
<div class="right" style="display: inline-block;">
<div id="Btn1" class="btn" style="display: inline-block;">Btn1</div>
<div id="Btn2" class="btn" style="display: inline-block;">Btn2</div>
</div>
</div>
What I want is,
I want to move text "Put me Under Fruits" actually under H3 heading,
Please note, I can't make any change to class "head" or .btn

Answer 1

<div class="head">
<div style="float:left">
<h3>Fruits</h3>
<div id="underFruits" style="margin-left:10px">Put me Under Fruits</div>
</div>
<div class="right">
<div id="Btn1" class="btn" style="display: inline-block;">Btn1</div>
<div id="Btn2" class="btn" style="display: inline-block;">Btn2</div>
</div>
</div>

Answer 2

You can achieve it like below.
<div class="head">
<div style="display:inline-block;">
<h3>Fruits</h3>
<div id="underFruits">Put me Under Fruits</div>
</div>
<div class="right" style="display: inline-block;">
<div id="Btn1" class="btn" style="display: inline-block;">Btn1</div>
<div id="Btn2" class="btn" style="display: inline-block;">Btn2</div>
</div>
</div>
DEMO