CSS style text is not working as expected - html

Question

Hi i just started using CSS i found this style which looks simple to do so i thought why not try making it to learn how to use CSS better,
But of course i failed badly basically am trying to make the style like this cause it looks like a simple thing to do right?
Result wanted:
My result:
Failed badly i know can anyone show me how to do the text position and stuff?
Thank you very much.
<div class="menu">
<ul>
<li>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSJGaeBPpPWONWkvBvhN3GcQxb_RVoIyAY7AxKuUuKFf0LFNkAUFVbuAZmEUtihSS0de0zFDx9v"/>
<h3>Jetliner with 155 on board loses chassis during takeoff in Russia</h3>
<span>Pravda - </span><span>Mar 9, 2016</span>
<p>A Boeing 737-400 en route Tyumen-Novy Urengoy lost chassis during takeoff on March 9 in Russia. Representatives of Yamal airline told ...</p>
</li>
<li>
<img src="data:image/jpeg;base64,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"/>
<h3>How Much Should You Spend on College and Student Loans?</h3>
<span>Black Enterprise - </span><span>Apr 20, 2016</span>
<p>The National Center for Education Statistics has a website that can help you calculate costs. CNN Money's College Cost Calculator is a great ...</p>
</li>
</ul>
</div>
Style code:
<style>
body {
background-color: white;
}
ul
{
list-style-type: none;
}
.menu ul li
{
margin: 15px;
}
img
{
vertical-align: middle; /* | top | bottom */
width: 80px;
height: 80px;
}
.menu ul li h3{
display: inline-block;
vertical-align: top;
}
.menu ul li span{
display: inline-block;
vertical-align: middle;
}
.menu ul li p
{
display: inline-block;
vertical-align: bottom; /* | top | bottom */
}
</style>

Answer 1

You can try somtehing like this
#container{
width: 500px;
height: 200px;
}
#imgContainer{
width: 30%;
height: 100%;
float:left;
}
#imgContainer img{
width: 100%;
height: 100%;
}
#textContainer{
padding:12px;
float: left;
}
<div id="container">
<div id="imgContainer"><img src="http://lorempixel.com/200/400/" alt=""></div>
<div id="textContainer">
<h2>Hello world this is some text </h2>
<p> and here is some smaller text </p>
</div>
</div>
`

Answer 2

Might sound harsh, but if you start with deleting all css you got, and give your image float:left; and move it to the bottom of the li might get you on your way.
goodluck

Answer 3

You could put the element within the <li> into a <section> and apply the styles as in this link
<ul>
<li>
<section>
<div class="left">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSJGaeBPpPWONWkvBvhN3GcQxb_RVoIyAY7AxKuUuKFf0LFNkAUFVbuAZmEUtihSS0de0zFDx9v" />
</div>
<div class="right">
<h3>Jetliner with 155 on board loses chassis during takeoff in Russia</h3>
<span>Pravda - </span><span>Mar 9, 2016</span>
<p>A Boeing 737-400 en route Tyumen-Novy Urengoy lost chassis during takeoff on March 9 in Russia. Representatives of Yamal airline told ...</p>
</div>
</section>
</li>
</ul>
See modifications to your original code:
https://jsfiddle.net/xwaLsd8p/