title: Set background color for div
body: <p>I have a grid created using bootstrap 3 divs. The collection of divs has 1 button, followed by a radio button, followed by another button. I would like to highlight these with a background color. The background color should not break in between and should be like a single row.</p>
  
  <p>Here is the fiddle with my attempt - <a href="https://jsfiddle.net/oxfqvtds/2/" rel="nofollow noreferrer">https://jsfiddle.net/oxfqvtds/2/</a></p>
  
  <p>In this, there is some empty space on the bottom right side of the div. As a result, the highlighting is not consistent. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.highlight {
    background-color: yellow;
  }
  
  .input-field {
    height: 20px;
    padding: 2px 10px;
  }
  
  .custom-label {
    line-height: 3.3em !important;
  }
  
  .label-size {
    font-size: 10px;
    line-height: 2.1em;
  }
  
  label {
    padding-right: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container-fluid"&gt;
  
      &lt;form class="form-horizontal"&gt;
        &lt;div class="col-md-12"&gt;...&lt;/div&gt;
        &lt;div class="col-md-12"&gt;...&lt;/div&gt; 
        &lt;div class="col-md-10  highlight"&gt;
          &lt;div class="form-group"&gt;
            &lt;div class="col-md-3"&gt;
              &lt;button class="btn btn-primary btn-xs" type="button"&gt;Test&lt;/button&gt;
  
            &lt;/div&gt;
  
            &lt;label class="col-md-2 label-size"&gt;Options&lt;/label&gt;
  
            &lt;div class="radio" class="col-md-7 label-size"&gt;
              &lt;label class="label-size"&gt;
              &lt;input type="radio" name="opt" value="opt" &gt;opt&lt;/label&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-2 highlight form-group"&gt;
  
          &lt;button class="btn btn-info btn-xs pull-right"&gt;Test2&lt;/button&gt;
  
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/Pgf5x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pgf5x.png" alt="Highlighting"></a></p>
  
  <p>Also, would like to have the buttons/radio buttons centered in the highlighted area. Right now they seem to be towards the top of the highlighted area.</p>