html5 section with two horizontal divs

I need a <section></section> that consists of the left and the right parts. The left part is only a single string—the date. The right part should contain something like:

<span>title</span>
<p>a lot of text of variable lenght</p>

Should I use <div>s within a section? The text from the right part should stay on the right part only (so I can't use float:left; alone on the left part).

Here is my solution with no <section>s, but it doesn't work for 100%, the text goes to the left after the height of 10px (see the code below).

    <div style="overflow: hidden; border: 1px solid red; padding:5px; ">
        <div style="float: left; width: 100px; height: 10px; color:blue;">right</div>
        <div style="">
            <span style="color:blue;">Lorem ipsum</span>
            <p>a lot of text of variable lenght</p>
        </div>
    </div>

How can I optimize the code and make it HTML5 with no mistakes, if found some?

Solution

Simply use margin-left:100px; on the right part, and get rid of the height on the left (example):

<section style="display:block; overflow: hidden; border: 1px solid red; padding:5px; ">
    <aside style="display:block; float: left; width: 100px; color:blue;">right</aside>
    <div style="margin-left:100px;">
        <span style="color:blue;">Lorem ipsum</span>
        <p>a lot of text of variable lenght</p>
    </div>
</section>