How to make the picture and text go in a row - html

Question

I need the default picture and text to go in a row, but when the screen resolution decreased, the text moved under the picture
<div style="background-color:#474747;">
<p><img src="{{ MEDIA_URL }}{{ article.img.url }}"/></p>
<a href="" style="margin-left:20px;">
<h3>{{article.title}}</h3>
<i class="glyphicon glyphicon-eye-open" style="font-size:20px; color:white;">
{{ article.view }} {{article.date|date:"d-m-Y"}}
</i>
</a>
</div>

Answer 1

I don't really know what its supposed to look like but you should fix your broken code then use CSS to tell all your block-level elements to be inline-block instead. Something like:
.allinline {
background-color: #474747;
}
.allinline * {
display: inline-block;
}
<div class="allinline">
<p><img src="imgurlhere" /></p>
<a href="" style="margin-left:20px;">
<h3>article.title</h3>
<i class="glyphicon glyphicon-eye-open" style="font-size:20px; color:white; ">article.date</i> </a>
</div>
Better yet, refactor your html into something a little more semantic and then use flexbox to achieve your desired layout. (Again, I'm guessing a bit at what you want it to look like)
.linkblock {
display: flex;
align-items: center;
background-color: #474747;
font-size: 20px;
}
.linkblock img {
margin-right: 20px;
}
.linkblock em {
color: white;
}
<a href="#" class="linkblock">
<img src="https://via.placeholder.com/100" />
<strong>article.title</strong> <em class="glyphicon glyphicon-eye-open">article.date</em>
</a>

Answer 2

To prevent children elements from breaking into diffrent lines, set white-space:nowrap on parent.
<div style="white-space:nowrap;background-color:#474747;">
<p><img src="{{ MEDIA_URL }}{{ article.img.url }}"/></p>
<a href="" style="margin-left:20px;">
<h3>{{article.title}}</h3>
<i class="glyphicon glyphicon-eye-open" style="font-size:20px; color:white;">
{{ article.view }} {{article.date|date:"d-m-Y"}}
</i>
</a>
</div>
Note: block elements always take 100% of width. You have also to update that paragraph and h1 to be inline-block

Answer 3

Try to use flex box while creating responsive Web designs.
Reference: - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Summary: In the example below, i have a parent element with display flex,and i have defined two child elements. One child will have image and the other will have text. I have defined on parent element to wrap the child elements if there is no space left using flex-wrap property.
<div class="parent">
<div class="flex-1 child-image">
<img src="https://via.placeholder.com/720
C/O https://placeholder.com/"/>
</div>
<div class="flex-1 child-text">
Some Dummy Text
</div>
</div>
body {
background-color: #a3d5d3;
}
.parent{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.flex-1{
flex: 1;
}
.child-text{
whitespace: nowrap;
}