title: How do you indent subsequent lines of text using <span>
body: <p>I'm working on applying CSS to a friend's web chatroom application.</p>
  
  <p>Below represents the current situation, and what I'd ideally like to happen.</p>
  
  <p><img src="https://i.stack.imgur.com/Ps9iJ.png" alt="problem and the goal">
  <br>
  <br>
  The HTML I have to work with is pretty simple, and there's 3 elements I have to work with, 'time' 'nickname' 'message' .</p>
  
  <p>This is how each line of chat is produced:</p>
  
  <p><code>&lt;div&gt;&lt;span id="time"&gt;10:00&lt;/span&gt;&lt;span id="nickname"&gt;tom&lt;/span&gt;&lt;span id="message"&gt;message&lt;/span&gt;&lt;/div&gt;</code></p>
  
  <p>This is definitely not the most pragmatic HTML, and I think a better solution would be to wrap each line in a table, where 'time' would be a column and 'nickname' and 'message' would be in another column. But I'm curious if this sort of thing could be accomplished purely with CSS and the HTML I have to work with right now. I've gotten close by having each span have "display:table-cell"..e.g.</p>
  
  <p><code>&lt;div&gt;&lt;span id="time" display:table-cell&gt;10:00&lt;/span&gt;&lt;span id="nickname" display:table-cell&gt;tom&lt;/span&gt;&lt;span id="message" display:table-cell&gt;message&lt;/span&gt;&lt;/div&gt;</code></p>
  
  <p><img src="https://i.stack.imgur.com/HGRsY.png" alt="almost"></p>
  
  <p><br>
  but.. the message wraps aligned to the message, and I'd like for it to wrap underneath the <em>nickname</em>. Any css trickery ideas that will produces the effect I'm looking for?</p>
  
  <p>Thanks!</p>