Setting a div to be the same height as an image

Question

Essentially this is what I'm getting...

While this is what I want.

I have the image height and width set up like this...

#content img{
padding: 3%;
width: 60%;
height: 50%;
float: left;
}

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.

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.

#text{
padding: 3%;
margin-right: 3%;
margin-top: 3%;
width: 37%;
height: 50%;
float: left;
background-color: #333333;
color: #FFFFFF;
}

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.

Thanks in advance.

EDIT: Here is the HTML

<div id="content">
    <img src="projectphotos/1.jpg">
    <span class="arrows" style="float: right;"><i class="fa fa-angle-`double-right fa-3x"></i></span>`
    <div id="text">
        Test
    </div>
</div>

Answer 1

You can use Flexbox

body, html {margin: 0; padding: 0}
.content {
  display: flex;
}
.text {
  background: #333333;
  color: white;
  flex: 1;
  margin: 10px;
}
.image {
  flex: 2;
  margin: 10px;
}
img {
  width: 100%;
  vertical-align: top;
}

<div class="content">
  <div class="image">
    <img src="http://placehold.it/900x450">
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, id.</div>
</div>

Answer 2

just add display: flex to #content and remove the float: left from both.