title: How to fit text properly inside a div with overflow: hidden?
body: <p>I'm having problems with the text inside a div with overflow: hidden.
  The div is a dropdown that shows another div containing an image and text. The dropdown works with javascript editing height. There is also a problem; once in a while when I click on the drop button, it takes two clicks for it to work, I don't know why.</p>
  
  <pre><code>&lt;div class="dropDiv"&gt;
  &lt;strong class="divTitle"&gt;Title&lt;/strong&gt;
  &lt;div class="dropDownBtn" onclick="dropDown()"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;div class="heroInfoDiv"&gt;
  &lt;img height="100%" width="20%" src="Media/image/img.png"&gt;
  &lt;div class="textHolder"&gt;If this text is too long, it dissapears.&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>At first I tried having the div holding the text as a p-element, but changing it to div with any kind of CSS on it didn't work. What I want to happen is for the text to obey the rules of like any normal container, where it breaks lines automatically.</p>
  
  <p>Here is a jsFiddle showing what is happening:
  <a href="https://jsfiddle.net/56oypcbj/5/" rel="nofollow noreferrer">https://jsfiddle.net/56oypcbj/5/</a></p>