Placing two elements inline - html

Question

I am attempting to place an iframe and img inline in a div. The code that I have posted puts the img below the iframe. I have tried to position and float the elements but nothing seems to work. I have also checked out other posts on SO, but nothing seems to work. I am willing to start from scratch if required.
I would be grateful if someone could point out my error and show me the corrections to make to get this to work. I have looked at other posts but nothing seems to be working.
Thank you.
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 49%;
margin: 0;
}
.holder {
height: 0px;
width: 100%;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>

Answer 1

The problem
The issue is that .inner has a width of 49% which is pushing the image onto a new line. This can be seen if you add a background color and height to .inner.
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 49%;
margin: 0;
background-color: red;
height: 100px;
}
.holder {
height: 0px;
width: 100%;
}
iframe {
opacity: 0.5;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>
How to fix
Option 1
Add whitespace: nowrap; to .holder to stop the image from being able to wrap onto the next line
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 49%;
margin: 0;
}
.holder {
height: 0px;
width: 100%;
white-space: nowrap;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>
Option 2
Set a larger width on .inner.
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 100%;
margin: 0;
}
.holder {
height: 0px;
width: 100%;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>