Как лучше сверстать такую структуру?

Question

[Сергей]

Как сверстать такую структуру? Поддержка IE 8+

Comments

[Степан Крапивин]

таблицей

[Сергей]

Степан, можно код?)

[Степан Крапивин]

Сергей, утром деньги — вечером вёрстка, вечером деньги — утром вёрстка и так далее.

Answer 1

[Александр]

<div class="form">
		
		<div class="form-col">
			<span class="label">Email</span>
			<span class="field">john</span>
		</div>
		...
		
		<div class="form-col">
			
			<div class="form-col-2">
				<span class="label">Postcode</span>
				<span class="field">2009</span>
			</div>
			
			<div class="form-col-2">
				<span class="label">Country</span>
				<span class="field">Australia</span>
			</div>
		
		</div>
	
	</div>

<style>
		.form{
			max-width: 400px;
			width: 100%;
		}
		.form-col .label{
			float: left;
			width: 80px;
		}
		.form-col .field{
			display: block;
			margin: 0 0 0 100px;
		}
		.form-col{
			border-bottom: 1px solid #ccc;
			overflow: hidden;
		}
		.form-col-2{
			float: left;
			width: 50%;
		}
</style>

Comments

[Сергей]

Как то криво получается.
+еще где "Address" нету такого переноса..

[Александр]

Сергей, Для адреса

<div class="form-col">
		<span class="label">Address</span>
		<span class="field">1 ...</span>
	</div>
	<div class="form-col">
		<span class="field">NSW</span>
	</div>

Для выравнивания строк, задать line-height, padding

Answer 2

[HamSter]

Таблицы должны верстаться таблицами:

<div class="table-wrap">
  <table>
  <tbody>
    <tr>
      <td><span>Email</span></td> <td colspan="3">[e-mail]</td>
    </tr>
    <tr>
      <td><span>Phone</span></td> <td colspan="3">02 9282 2888</td>
    </tr>
    <tr>
      <td><span>Adress</span></td><td colspan="3">1 Darling <br> Lorem</td>
    </tr>
    
    <tr>
      <td>
        <span>Postcode</span>
      </td>
      <td>
        2009
      </td>
      
      <td>
        <span>Country</span>
      </td>
      <td>Australia</td>
    </tr>
  </tbody>
</table>
</div>

Пример на codepen

Comments

[Сергей]

Все супер, за исключением со строчкой с "Address". Как можно сделать, чтобы такой перенос был?

[HamSter]

Сергей, поправила примеры. Как правило добавляется тег <br> для переноса на новую строку

[Александр]

А где тут таблица? :)