How to add tabs or spaces to a textline with CSS?

How to add tabs or spaces to a textline with CSS?

How can I make a conversation dialogue appear like this:
Person 1: "Hello"
Person 2: "Hi"
I have my dialogue colored with black and yellow
As you can see, the point where the quote starts doesn't match up, so it
does look messy that way, I want to make it indent it a little bit and
also want the nameblocks have the same width (which will apply to all the
names that will be in a dialogue, doesn't matter if it's a long or short
name) And you see that "you" on the third line? Can I make it appear right
under the point where the quote starts automatically, if it's possible?
Here's my dialogue:
<p class="smallmargin"><span> <span class="dialogue1"><span
class="person1">Harvey: </span>&nbsp; "What are your choices when someone
puts a gun to your head?"</span> <span class="dialogue2"></span></span><br
/>
<span class="dialogue2"><span class="person2">Mike: </span>&nbsp; "What
are you talking about? You do what they say or they shoot you." </span>
<br />
<span class="dialogue1"><span class="person1">Harvey: </span>&nbsp;
"Wrong. You take the gun, or you pull out a bigger one. Or, you call their
bluff. Or, you do any one of a hundred and forty six other
things."</span></p>
Here's my CSS mark up:
p.smallmargin {
margin: 0px;
padding: 0px;
line-height:160%;
}
.dialogue1 {
background-color: #FFB100;
color: black;
font-size: 15px;
font-family: 'Arial Black';
}
.dialogue2 {
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
color: #FFB100;
background-color:black;
}
.person1 {
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
color: #FFB100;
background-color:black;
text-transform: uppercase;
}
.person2 {
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
color: black;
background-color: #FFB100;
text-transform: uppercase;
}
By the way, I know I can add &nbsp; but that means that I have to add that
to every dialogue manually and that would be a tiresome job.