Setting a div to be the same height as an image
<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>