title: How to adjust div height size depending on text length
body: <p>I'm trying to create a box that adjusts its height depending on how long the text is. I keep trying to change height (auto, etc) or the overflow but I'm not quite sure what I'm doing wrong. Any help is greatly appreciated!</p>
  
  <p>Here is a picture of the current situation: </p>
  
  <p>EDIT: <a href="https://jsfiddle.net/clagos08/x0Lz9673/4/" rel="nofollow noreferrer">JS Fiddle</a> - The overflow is set to hidden and the min-height is set to 50px but the div is still not adjust. <em>I only want the div height to adjust to the content not the width</em></p>
  
  <p><img src="https://i.stack.imgur.com/RjjDK.png" alt="Image"></p>
  
  <p>Here is my code below:</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>.article-item-overlay {
    display: inline-block;
    height: inherit;
    margin: 190px;
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 0;
    padding-bottom: 40px;
    position: relative;
    width: 60%;
    background: #fff;
    border: 1px solid #000;
  }
  .text-center {
    text-align: center;
  }
  .article-item-date-wrapper {
    position: absolute;
    bottom: -23px;
    text-align: center;
    width: 100%;
  }
  .article-item-date {
    margin: 0;
    font-size: 7pt;
    font-family: 'Rock Salt', cursive;
    color: rgba(255, 255, 255, .75);
    background: #000;
    height: 35px;
    line-height: 35px;
    padding: 0 18px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 3px;
  }
  .article-item-title {
    padding: 20px;
    text-align: center;
    font-family: 'Lato', sans-serif;
    letter-spacing: .1em;
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    font-size: 13px;
    line-height: 2.0;
    overflow: inherit;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="article-item-overlay text-center"&gt;
  
    &lt;div class="article-item-date-wrapper"&gt;
  
      &lt;div class="article-item-date"&gt;TITLE&lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;h3 class="article-item-title"&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/h3&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>