Edit: answer to this question is easy, a simple example of float left and float right.

I'd like to float some annotations to the left of a topic using HTML and CSS, for example the 'status' and 'author' annotations shown in the following mockup/image:

For semantic reasons, perhaps:

• I prefer to use CSS instead of a table-based layout
• In the HTML, the status should appear after the corresponding heading

For example:

<h1>This is a section title</h1>
<div class="status">approved</div>
<div class="author">chris</div>
<p>This is some text. Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<h1>Different section title</h1>
<div class="status">rejected</div>
<p>Lorem ipsum.</p>

I'd like the annotations to be after the heading in the HTML, because everything associated with (i.e. the contents of) a topic is usually whatever is after the topic's heading.

However I'd like the annotations to be displayed before (to the left of) the heading, as illustrated above.

Is this possible? What is the most semantic HTML, and corresponding CSS, that will render as shown above? Would you recommend a table-based layout instead? Even if that means putting the headings in a table cell?

It may not be possible; this answer suggests it isn't possible ... but I don't know CSS well enough to say that for sure.