how to format text to align in two columns - css

Question

First off the title may not be clear but i dont know to come up with a better one.
i have text that I put in a td cell in a velocity template, something like below
* My name
is what?
what i want is something that more formatted like below.
* My name
is what?
"My name is what?" is variable i print and all i do is concatinate * to it and put in the cell for display
what can be done to make it happen. i am not sure of the best way to start off with. I use IE8

Answer 1

Here is one possible solution that may work for you:
Demo Fiddle
Instead of separating content into different elements and positioning them (or nesting them). I thought a simple before class could work well in this situation.
HTML:
<div class="copy-block">
My name is what?
</div>
CSS:
.copy-block {
width: 60px;
position: relative;
}
.copy-block:before {
content: "*";
position: absolute;
left: -15px;
top: 3px;
}

Answer 2

The name is variable. The output on two lines can be solved with adding a break in the table cell.
table {
border: 1px solid gray;
font: 12px arial;
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
.asterix-name {
position: relative;
padding: 5px 5px 5px 15px;
}
.asterix-name:before {
content:'* ';
position: absolute;
left: 5px;
top: 0.5em;
}
<table>
<tr>
<td>
<div class="asterix-name">My name<br> is what?</div>
</td>
</tr>
</table>
http://jsfiddle.net/Fb7jT/49/