[enuddleyarbl]

Regular paragraphs with those column widths didn't work vanilla. I had to set up a rudimentary flexbox:

https://www.w3schools.com/css/css3_flexbox.asp

I've tried Description Lists, Tables and Flexboxes, and they each have their pluses and minuses. I think I like the way a description list looks in a viewer best. In the editor, I think I prefer the way the table html looks. But, they're all usable.

EDIT 1: And, structuro-semantically, I guess I'd give the nod to the Flexbox.
EDIT 2: Somehow, I deleted my <span class="person... bit around the character names in the right-hand column. The names are supposed to be smallcapped.

Let's see if I can stick some attachments in here.













My CSS for Play Stuff:

section.playact {
  /*	Play Act Section Styling	*/
  display: block;
}
section.playact div.playline {
  display: flex;
}
section.playact p {
  /* Play Act Paragraph Styling */
  display: block;
  text-indent: 0;
}
section.playact dd.dialog {
  /*	Play Act Dialog Styling for Description List <dl>	*/
  display: block;
  padding-left: 2%;
  text-align: left;
  vertical-align: top;
}
section.playact p.dialog {
  /*	Play Act Dialog Styling for Paragraph <p>	*/
  display: inline-block;
  margin-bottom:	0;
  margin-top:	0;
  padding-left: 2%;
  text-align: left;
  vertical-align:	top;
  width: 65%;
}
section.playact td.dialog {
  /*	Play Act Dialog Styling for Table <td>	*/
  border: 0;
  display: table-cell;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: left;
  vertical-align: top;
}
section.playact dt.person {
  /*	Play Act Person Styling for Description List <dl>	*/
  display: block;
  font-variant: small-caps;
  padding-right: 3%;
  text-align: left;
  vertical-align: top;
}
section.playact p.person {
  /*	Play Act Person Styling for Paragraph <p>	*/
  display: inline-block;
  font-variant: small-caps;
  margin-bottom:	0;
  margin-top:	0;
  padding-right: 3%;
  text-align: right;
  vertical-align:	top;
  width: 30%;
}
section.playact td.person {
  /*	Play Act Person Styling for Table <td>	*/
  border: 0;
  display: table-cell;
  font-variant: small-caps;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 3px;
  padding-top: 2px;
  text-align: left;
  vertical-align: top;
}
section.playact span.person {
  /*	Play Act Person Styling for Span <span>	*/
  display: inline-block;
  margin-top: 0;
  padding-right: 0%;
  font-variant: small-caps;
  vertical-align: top;
}
section.playact .person::after {
  /*	Append Colon and Space After Play Act Person for Anything	*/
  content: ": ";
}
section.playact span.person::after {
  /*	Don't Put Anything After Play Act Person for Span <span>	*/
  content: "";
}
section.playact dd.stage_direction {
  /*	Play Act Stage Direction Styling for Description List <dd>	*/
  display: block;
  font-style: italic;
  padding-left: 2%;
  text-align: left;
  vertical-align: top;
}
section.playact p.stage_direction {
  /*	Play Act Stage Direction Styling for Paragraph <p>	*/
  display: inline-block;
  font-style: italic;
  margin-bottom:	0;
  margin-top:	0;
  padding-left: 2%;
  text-align: left;
  vertical-align: top;
  width: 65%;
}
section.playact td.stage_direction {
  /*	Play Act Stage Direction Styling for Table <td>	*/
  border: 0;
  display: table-cell;
  font-style: italic;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: left;
  vertical-align: top;
}
section.playact span.stage_direction {
  /*	Play Act Stage Direction Styling for Spans <span>	*/
  display: inline-block;
  font-style: italic;
  padding-left: 0;
  text-align: left;
  vertical-align: top;
}
section.playact .stage_direction::before {
  /*	Prepend Opening Parenthesis Before Play Act Stage Directions	*/
  content: "(";
}
section.playact .stage_direction::after {
  /*	Append Closing Parenthesis After Play Act Stage Directions	*/
  content: ")";
}