title: Floating a button to the right while keeping the height and vertical center of the text
body: <p>I have a <code>button</code> inside of a <code>dt</code> element. </p>
  
  <p><img src="https://i.stack.imgur.com/54kkh.png" alt="starting image"></p>
  
  <p>Everything looks fine, however I want to float the button to the right. </p>
  
  <p><img src="https://i.stack.imgur.com/9agCX.png" alt="float right"></p>
  
  <p>When I add the float on the button, now the <code>dt</code> is shorter causing it to look poor. </p>
  
  <p><img src="https://i.stack.imgur.com/ZKLlk.png" alt="enter image description here"></p>
  
  <p>Adding <code>overflow:auto</code> fixes this, but now the text on the left is not vertically centered. <code>vertical-align:center</code> does not fix this nor does it help by hacking it with <code>display:table-cell;</code> Is there another way of accomplishing this that I am overlooking?</p>
  
  <p><code>&lt;dt style="overflow:auto"&gt;Title &lt;button style="float:right"&gt;save&lt;/button&gt;&lt;/dt&gt;</code></p>