子标题以内联方式显示

Question

这是我的代码：

.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>

我想要的是，

我想在H3标题下移动文本“Put me Under Fruits”，

请注意，我不能对课程“head”或.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

你可以像下面那样实现它。

<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