Align content inside Div

THAT I LOVE

I have this table.

With this HTML

<div class="list-item">
<p>
 <input type="checkbox">
 <span class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></span> 
 <span class="list-title">{{this.title}}</span> 
 <span class="list-owner">{{this.owner}}</span>
 <span class="list-date">16 Dec 2014</span>
</p>
 </div><br>

      

        
        
        
      

    

With this CSS

.list-item{
  display: inline-block;
  width: 100%;
  border: solid 1px #dddddd;
}

.list-type{
  margin-left: 10px;
  margin-right: 10px;
}

      

        
        
        
      

    

WHAT I WANT TO DO

But I want to create something like a table inside <div>

.

NOTE I KNOW a is <table>

perfect, but for the way this content is beigned I need to simulate the table using this <div>

, so the unorntannly table is not an option here.

I need to reproduce something like this (check the image).

NOTE Ignore the star icon

WHAT I'M ALREADY TRYING

Settin margin-left

for each <span>

, but the order of "admin" and "date" is not equal, if I use the fields I get this (check the image).

I get it with this CSS

.list-item{
  display: inline-block;
  width: 100%;
  border: solid 1px #dddddd;
}

.list-type{
 margin-left: 10px;
}

.list-title{
   margin-left: 10px;
}

.list-owner{
  margin-left: 100px;
}

.list-date{
  margin-left: 190px;
}