Layout issue with Grids:SkeletonFramework - html

Question

I am using Skeleton Framework, and the layout I made using the grid system is like this:
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="three columns">
<br>
</div>
<div class="six columns" style="margin-top: 25px">
<img src="img/okay.jpg" width="50px" style="display:inline"/>
<p id="title" style="display:inline">{{title}}</p>
<p id="excerpt" style="display:inline">{{description}}</p>
<div id="describe me" style="display:inline"><span style="display:inline">{{name}}</span><span style="display:inline">{{date}}</span></div>
</div>
<div class="three columns">
<br>
</div>
</div>
</div>
It shows something like this:
But what I want is something like this:
How can this be achieved?
Result:

Answer 1

Responding to your code, although there are many alternate solutions for this, maybe even in their documentation.
First, try to avoid using inline styles.
Wrap your content inside a
class.
Vetical align the image to the top.
Remove the default margin
on the paragraph items.
.desc {
display: inline-block;
}
.desc p {
margin-bottom: 0;
}
.six img {
vertical-align: top;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="three columns">
<br>
</div>
<div class="six columns">
<img src="http://placehold.it/50x75" width="50px" />
<div class="desc">
<p id="title">{{title}}</p>
<p id="excerpt">{{description}}</p>
<div id="describe me"><span>{{name}}</span><span>{{date}}</span>
</div>
</div>
</div>
<div class="three columns">
<br>
</div>
</div>
</div>