如何让不同的文本行占用相等的空间？

Question

<p>gypsum -> triton</p>
<p>antimony -> juno.lunarirc.net</p>
<p>bismuth -> apollo.lunarirc.net</p>

gypsum -> triton    
antimony -> juno    
bismuth -> apollo

如何使->对齐如下：

gypsum   -> triton    
antimony -> juno    
bismuth  -> apollo

Answer 1

只需使用表格。

 <table style="width:50%">
  <tr>
    <td>gypsum</td>
    <td>triton</td>
  </tr>
  <tr>
    <td>antimony</td>
    <td>juno</td>

  </tr>
</table> 

Answer 2

<table> 
  <tr>
    <td>gypsum</td>
    <td> -> </td>
    <td>triton</td>
  </tr>
  <tr>
    <td>antimony</td>
    <td> -> </td>
    <td>juno</td>
  </tr>
  <tr>
    <td>bismuth </td>
    <td> -> </td>
    <td>apollo</td>
  </tr>
</table>