Q:

HTML align labels and texts

I am trying to make a view that looks like the image below

My view contains:
<span>Title :</span>
<span>@ViewBag.Movie</span>

<div>Date : @ViewBag.Date</div>
<div>Transaction Number : @ViewBag.TransactionNo</div>
<div>Timing : @ViewBag.Timing</div>
<div>Rating : @ViewBag.Rating</div>
<div>Hall : @ViewBag.Hall</div>

Controller.cs:
ViewBag.Movie = "movie a";
ViewBag.Date = "3-Nov-2017";
ViewBag.TransactionNo = "1234";
ViewBag.Timing = "7:30pm";
ViewBag.Rating = "PG13";
ViewBag.Hall = "3";

How do I align the view to make it look like the image?

A:

It is better to use HTML table if you are creating a table structure
Example:

<table>
  <tr>
    <th>Movie Information</th>
  </tr>
  <tr>
    <td>Title</td>
    <td>: movie a</td>
  </tr>
  <tr>
    <td>Date</td>
    <td>: 3-Nov-2017</td>
  </tr>
  <tr>
    <td>Transaction Number</td>
    <td>: 1234</td>
  </tr>
  <tr>
    <td>Title</td>
    <td>: movie a</td>
  </tr>
</table?

