CSS-how to text-indent a nested unordered list - html

Question

I do not know if this is possible, but I'm trying to indent the <li> in red to wrap underneath itself with CSS. I've used text-indent, padding, margin, and cannot get it to work. The <li> in red seems to be set at the same x/y coordinate as the green text. It only lets me push it away from the time (in green).
I can use a table, but I'm trying to accomplish this with CSS.
The image above is where I am at. The image below is what I am after.
HTML
<div class="agendaList">
<ul>
<li>Day, Month Date</li>
<ul>
<li>0:00 am</li>
<li>This is where the event description will appear. I would like for it to wrap under itself and not under the time. How do I start the wrap at the first word in the first sentence (This) of this <li>.</li>
</ul>
</ul>
<ul>
<li>Day, Month Date</li>
<ul>
<li>0:00 am</li>
<li>This is where the event description will appear. I would like for it to wrap under itself and not under the time. How do I start the wrap at the first word in the first sentence (This) of this <li>.</li>
</ul>
</ul>
</div>
CSS
.agendaList ul ul {
list-style: disc;
/* list-style-image: url(bullet.gif); */
margin-left: 0;
padding-left: 0;
}
.agendaList ul ul li {
display: inline;
list-style: none;
color: green;
}
.agendaList ul ul li:last-child {
display: inline;
color: red;
list-style-position: inside;
padding: 10px 0 10px 20px;
text-indent: -1em;
}

Answer 1

Here are two options:
Absolutely position the first li element and then use a margin to add space to the second list item.
Example Here
.agendaList ul ul li:first-child {
position: absolute;
}
.agendaList ul ul li:last-child {
display: inline-block;
color: red;
list-style-position: inside;
margin-left: 65px;
}
Alternatively, a better option would be to set the display of both li elements to table-cell. Add white-space:nowrap to the first li in order to prevent the text from wrapping.
Example Here
.agendaList ul ul li {
display:table-cell;
list-style:none;
color:green;
}
.agendaList ul ul li:first-child {
white-space:nowrap;
}
.agendaList ul ul li:last-child {
color: red;
list-style-position: inside;
padding-left:20px;
}