Align image, text and header inside of a box - html

Question

I'm designing this box but I have the following problem. I have an image, a header and some text inside of it but I can't align the header so that it appears above the rest of the text. It ends up looking like this:
HTML:
<div class='Favorites'>
<div class='favorites_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/favorites_help.png" alt="Fav" class="favor_help">
</div>
<div class="Messagebox_title">
<h1 >Favorites category
</h1>
</div>
<div class="Messagebox">
<h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
</h4>
</div>
</div>
</div>
CSS regarding the two text parts:
.Messagebox_title {
vertical-align:middle;
display:table-cell;
text-align:center;
color: #555;
position: relative;
font-family: monaco, monospace;
font-size: 15px;
}
.Messagebox {
vertical-align:middle;
display:table-cell;
text-align:justify;
color: #555;
position: relative;
margin-left: 2px;
margin-right: 2px;
margin-top: 0px;
margin-bottom: 0px;
font-family: monaco, monospace;
font-size: 15px;
}

Answer 1

You could use flexbox, you would need to wrap the text in an additional div.
Example:
.Messagebox_title {
text-align: center;
}
.Messagebox {
text-align: justify;
margin: 0 2px;
}
.box {
font-size: 15px;
font-family: monaco, monospace;
display: flex;
color: #555;
}
.text_wrapper {
display: flex;
flex-direction: column;
}
<div class='Favorites'>
<div class='favorites_info'>
<div class="box">
<div class="picture">
<img src="https://unsplash.it/150" alt="Fav" class="favor_help">
</div>
<div class="text_wrapper">
<div class="Messagebox_title">
<h1>Favorites category
</h1>
</div>
<div class="Messagebox">
<h4>You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
</h4>
</div>
</div>
</div>
</div>
You can also do something similar with CSS Grid, which reduces the amount of HTML needed.
.Favorites {
display: grid;
grid-template-columns: 150px 1fr;
grid-gap: 1em;
font-size: 15px;
font-family: monaco, monospace;
color: #555;
}
.picture {
grid-row: 1 / 3;
}
h1 {
grid-column: 2;
text-align: center;
}
h4{
grid-column: 2;
grid-row: 2;
text-align: justify;
margin: 0 2px;
}
<div class='Favorites'>
<div class="picture">
<img src="https://unsplash.it/150" alt="Fav" class="favor_help">
</div>
<h1>Favorites category</h1>
<h4>You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.</h4>
</div>

Answer 2

Try changing according to your need
.box{float:left;width:100%;position:relative;border:1px solid yellow;margin-bottom:15px;}
info{border:1px solid blue;}
.icon{float:left;width:100px;background:yellow;height:120px;text-align:center;position:relative;overflow:hidden;}
.info .icon{background:blue;}
.icon span{position:absolute;top:auto;margin:33% auto;left:0;right:0;bottom:auto}
.text{float:left;width:calc(100% - 100px);width:-webkit-calc(100% - 200px);padding:5px;}
<div class="box">
<div class="icon"><span>Img</span></div>
<div class="text">
<h3>Heading comes here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>
</div>
<div class="box info">
<div class="icon"><span>img</span></div>
<div class="text">
<h3>Heading comes here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>
</div>

Answer 3

You are doing fine.
Your code works by making a small change.
Just change display: to block and add float: left to your picture.
<style>
.picture
{
float:left;
margin-right:10px;
}
.Messagebox_title {
vertical-align:middle;
display:block;
text-align:left;
color: #555;
position: relative;
font-family: monaco, monospace;
font-size: 15px;
}
.Messagebox {
vertical-align:middle;
display:block;
text-align:justify;
color: #555;
position: relative;
margin-left: 2px;
margin-right: 2px;
margin-top: 0px;
margin-bottom: 0px;
font-family: monaco, monospace;
font-size: 15px;
}
</style>
<div class='Favorites'>
<div class='favorites_info'>
<div class="box">
<div class="picture">
<img src="http://eztechtraining.com/wp-content/uploads/2012/11/2012-10-20-21.38.35-150x150.jpg" alt="Fav" class="favor_help">
</div>
<div class="Messagebox_title">
<h1 >Favorites category
</h1>
</div>
<div class="Messagebox">
<h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
</h4>
</div>
</div>
</div>