flexbox table

by jmjpro

HTML

<div class="container">
<table class="tapingo-form">
  <tr>
    <th>Field 1 Really long</th>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr>
    <th>Field 2</th>
    <td>
      <input type="text">
    </td>
  </tr>
</table>
</div>

SCSS

.container { /* for debugging */
  outline: 1px solid blue; 
  width: 400px;
  padding: 5px;
}

.tapingo-form {
  outline: 1px solid red; /* for debugging */
  width: 100%;
  padding: 5px;
  tr {
    display: flex;
    flex-direction: row; /* change flex-direction to 'column' to show field labels on separate rows */
  }
  th {
    min-width: 200px; /* this is the primary values that needs to change for flex-direction: row to determine the width of the field labels */
    margin-right: 10px;
    font-weight: normal;
    text-align: left;
  }
  td {
    width: 100%;
  }
  input[type="text"] {
    width: 100%;
  }
}