title: Setting a div to be the same height as an image
body: <p>Essentially this is what I'm getting...</p>
  
  <p><a href="https://i.stack.imgur.com/7FeSi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7FeSi.png" alt="enter image description here"></a></p>
  
  <p>While this is what I want.</p>
  
  <p><a href="https://i.stack.imgur.com/fn9m0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fn9m0.png" alt="enter image description here"></a></p>
  
  <p>I have the image height and width set up like this...</p>
  
  <pre><code>#content img{
  padding: 3%;
  width: 60%;
  height: 50%;
  float: left;
  }
  </code></pre>
  
  <p>With %s as I want it to be responsive and all. So the exact height of the image in px I can't really tell. </p>
  
  <p>When I try to set up the same dimensions for the gray box, it only fills up with what is in it as you can see.</p>
  
  <pre><code>#text{
  padding: 3%;
  margin-right: 3%;
  margin-top: 3%;
  width: 37%;
  height: 50%;
  float: left;
  background-color: #333333;
  color: #FFFFFF;
  }
  </code></pre>
  
  <p>Anyway on how to go about this? I'm also starting to think the problem may be I'm trying to make it responsive incorrectly. </p>
  
  <p>Thanks in advance.</p>
  
  <p>EDIT: Here is the HTML</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;img src="projectphotos/1.jpg"&gt;
      &lt;span class="arrows" style="float: right;"&gt;&lt;i class="fa fa-angle-`double-right fa-3x"&gt;&lt;/i&gt;&lt;/span&gt;`
      &lt;div id="text"&gt;
          Test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>