Display: inline-block not working with divs - html

Question

i'm trying to create a news box where there will be a div containing an image on the left and a div containing lines of text on the right. Whenever i set them to inline-block the text goes right beneath the div image and stays there. I want them to be in a single line.
Here's my code, can you point out what i'm doing wrong?
EDIT: Corrected the TYPO but still...
<div id="newsBox">
<div id="newsImg">
<img src="images/news1.jpg" alt="news1">
</div>
<div class="metaNews">
<div id="newsTitle">
<h3>Text Text Text Text Text Text Text Text .</h3>
</div>
<div class="newsBrief">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div>
<div style="clear:both"></div>
<div class="newsBy">
<span class="metaDate">Posted on 10/5/2017</span>
<span class="metaBy">By Li</span>
</div>
<div class="newsLink">
View →
</div>
<div style="clear:both"></div>
</div>
And the CSS:
#newsBox {
width: 85%;
margin: 0.5rem auto;
padding: 0.5rem;
border: #333 solid 1px;
background-color: #c2c2c2;
}
#newsImg {
display:inline-block;
}
#newsImg > img{
max-width: 120px;
max-height: 120px;
padding-right:20px;
vertical-align: middle;
}
.metaNews{
text-align:center;
display:inline-block;
}
#newsTitle {
}
.newsBy {
display:inline-block;
}
.newsLink {
float:right;
width: 6rem;
text-align: center;
background-color: #2F4F4F;
}
.newsLink a{
font-family: 'Play', sans-serif;
color: #fff;
text-decoration: none;
}

Answer 1

You got a typo in:
.metaNews{
text-align:center;
display:inline-blockl
}
inline-blockl has extra l instead of a ;
.metaNews{
text-align:center;
display:inline-block;
}
jsfiddle (you should stretch the result window a bit to let it have enough width to see the results you wanted )

Answer 2

Wrap the divs <div id="newsImg"> , <div class="metaNews"> using a div and set its display as flex.
#newsBox {
width: 85%;
margin: 0.5rem auto;
padding: 0.5rem;
border: #333 solid 1px;
background-color: #c2c2c2;
}
#newsImgWrapper {
display: flex;
}
#newsImg {
display: inline-block;
}
#newsImg>img {
max-width: 120px;
max-height: 120px;
padding-right: 20px;
vertical-align: middle;
}
.metaNews {
text-align: center;
display: inline-block;
}
#newsTitle h3{ margin:0;}
.newsBy {
display: inline-block;
}
.newsLink {
float: right;
width: 6rem;
text-align: center;
background-color: #2F4F4F;
}
.newsLink a {
font-family: 'Play', sans-serif;
color: #fff;
text-decoration: none;
}
<div id="newsBox">
<div id="newsImgWrapper">
<div id="newsImg">
<img src="images/news1.jpg" alt="news1">
</div>
<div class="metaNews">
<div id="newsTitle">
<h3>Text Text Text Text Text Text Text Text .</h3>
</div>
<div class="newsBrief">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div>
</div>
<div style="clear:both"></div>
<div class="newsBy">
<span class="metaDate">Posted on 10/5/2017</span>
<span class="metaBy">By Li</span>
</div>
<div class="newsLink">
View →
</div>
<div style="clear:both"></div>
</div>

Answer 3

The problem is that you are using display: inline-block, Without use width, display: inline-block does not work without using setting width,
So I added these properties: width: 50% to #newsImg selector and to .metaNews,
Here a running example in jsFiddle