How do I write good-looking dialogue in a Blogspot article? There doesn't seem to be a way of doing it in "editor mode", so I'm hoping there's some convenient HTML command for it. I'm envisioning something like this (created in paint), but I'm open to suggestions:[![dialogue](https://i.stack.imgur.com/A0Iie.png)](https://i.stack.imgur.com/A0Iie.png)

EDIT: I tried both ways you suggested. Here's the article:

```
blah blah

<div style='display:inline-block; width: 30%; margin-right: 2em;'> 
Person A </div> 
<div style='display:inline-block; width: 60%; margin-right: 2em;'> 
I am saying words ... whatever words person A is saying ... </div> 
<br /> 
<div style='display:inline-block; width: 30%; margin-right: 2em;'> 
Person b </div> 
<div style='display:inline-block; width: 70%; margin-right: 2em;'> 
I am saying words ... whatever words person B is saying ... </div>

blaaaaah

<div class="nameText"> 
Person A </div> 
<div class="dialogText"> 
I am saying words ... whatever words person A is saying ... </div> 
<br /> 
<div class="nameText"> 
Person b </div> 
<div class="dialogText"> 
I am saying words ... whatever words person B is saying ... </div>

blah

```

Here's how it turned out:

[![screenshot](https://i.stack.imgur.com/KPjgf.png)](https://i.stack.imgur.com/KPjgf.png)

Here's the entire CSS field.

```
.profile-img{
height: auto;
width: 240px;
}
.goog-inline-block.dummy-container div, .goog-inline-block.dummy-container div iframe ssyby, .goog-inline-block.dummy-container div iframe{
width: 32px !important;
}
nameText {
    display:inline-block; 
    width: 30%; 
    margin-right: 2em;
}
dialogText {
    display:inline-block; 
    width: 60%; 
    margin-right: 2em;
}

```

By the way, if there's a way to make this work, can something be added to nameText to make it italic by default?

EDIT: Added the dots to the CSS so it's `.nameText` and `.dialogText`. Here's how it turned out:

[![screenshot2](https://i.stack.imgur.com/xU8AK.png)](https://i.stack.imgur.com/xU8AK.png)