Layout issue with Grids:SkeletonFramework

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.

1. First, try to avoid using inline styles.

2. Wrap your content inside a class.

3. Vetical align the image to the top.

4. 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>