title: Fitting row to oversized content with absolute position
body: <p>Here is an example of a row (in a list of rows), which has one row item that exceeds its height.</p>
  
  <p>Setting <code>overflow: visible</code> did not solve this issue, since it only made the content visible without resizing the external DIVs, because <code>position: absolute</code> is set.</p>
  
  <p>How to make the row (green border) adjust to its content?</p>
  
  <p>It uses some CSS classes from Bootstrap and ideally should take use of the existing classes.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"&gt;
  
  &lt;div class="form-group panel-heading row" style="display: block; position: relative; line-height: 20px; border: 1px solid green"&gt;
    &lt;div class="col-sm-2 switch-wrapper" style="overflow:visible; position:relative; border: 1px solid blue"&gt;
      &lt;div style="overflow:visible; border: 1px solid yellow"&gt;
        &lt;i class="fa fa-caret-up" style="border: 1px solid black"&gt;&lt;/i&gt;&lt;span style=" position: absolute;margin-left: 5px; border: 1px solid red"&gt;A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.
      &lt;/span&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>