使用CSS Flexbox。在HTML中设置行和列。添加类到“transaction-group”，使显示为flex，使flex-direction为column，这样行就可以堆叠。看看下面的代码。我只是添加了一些额外的样式，使它更吸引人，但这基本上完成了
金额票据日期选项列表创建取消
格式。

.transaction-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
}

.col {
  margin-right: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
}

<div class="transaction-group" th:each="singleGroup  : ${transactionGroup}">
  <div class="row">
    <div class="col">
      <label for="amount">AMOUNT:</label>
      <input type="text" id="amount">
    </div>
    <div class="col">
      <label for="note">NOTE:</label>
      <input type="text" id="note">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <label for="date">DATE:</label>
      <input type="text" id="date">
    </div>
    <div class="col">
      <label for="optionList">OPTION LIST:</label>
      <select id="optionList">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button type="submit">Create</button>
    </div>
    <div class="col">
      <button type="button">Cancel</button>
    </div>
  </div>
</div>