HTML paragraph column style - php

Question

I'm making a list and each list item has the same structure:
I already got the image & header in place but below the header I have a paragraph, and I don't know how to make it like it's shown in the picture (with the subject & others), like there's columns and they're at fixed locations in the list item (so they order evenly vertically).
My current paragraph is just subject: test. I don't know how to place the "other" texts.
My CSS code related to this:
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 1000px;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
li img {
float: left;
margin: 0 15px 0 0;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}
and my HTML code:
<ul>
<li>
<img src="http://lorempixum.com/100/100/nature/2">
<h3>Header</h3>
<p>Subject: Test</p>
</li>
</ul>
Thanks!

Answer 1

use this code:
DEMO
HTML
<ul>
<li>
<img src="http://lorempixum.com/100/100/nature/2" />
<h3>Header</h3>
<ul>
<li><strong>Subject:</strong> test</li>
<li><strong>Other:</strong> test</li>
<li><strong>Other:</strong> test</li>
<li><strong>Other:</strong> test</li>
<li><strong>Other:</strong> test</li>
<li><strong>Other:</strong> test</li>
</ul>
</li>
</ul>
CSS
body, html, ul{
margin:0;
padding:0;
}
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 1000px;
}
ul ul{
float:right;
width:865px;
}
li li{
width:31%;
float:left;
padding: 10px 1%;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
margin:0;
}
li img {
float: left;
margin: 0 15px 0 0;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}

Answer 2

This is something like you want:
CSS:
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 1000px;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
margin-top:-5px;
position:relative;
}
li img {
float: left;
margin: 0 15px 0 0;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
margin-top:-20px;
position:relative;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}
and you can see jsfiddle