Html Bulma：跨列对齐表单水平字段

我正在尝试构建一个表单，该表单顶部分为两列，底部分为一列，类似于下图所示：

我使用Bulma列创建了一个模板，但是字段没有按照我希望的方式对齐。下面是我一直在使用的示例代码：

  <section class="section">
<div class="columns">
  <div class="column">
    <div class="columns">
      <div class="column">

        <div class="field is-horizontal has-background-danger">
          <div class="field-label is-small">
              <label class="label">Info 1</label>
          </div>
          <div class="field-body">
              <div class="field">
                  <div class="control">
                      <input type="text" class="textarea is-small" placeholder="Some text here...">
                  </div>
              </div>
          </div>
        </div>
      </div>
    <div class="column">

      <div class="field is-horizontal has-background-warning">
        <div class="field-label is-small">
            <label class="label">Info 2</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <input type="text" class="textarea is-small" placeholder="Some text here...">
                </div>
            </div>
        </div>
      </div>


    </div>

    </div>

    <div class="field is-horizontal has-background-primary">
      <div class="field-label is-small">
          <label class="label">Info 0</label>
      </div>
      <div class="field-body">
          <div class="field">
              <div class="control">
                  <input type="text" class="textarea is-small" placeholder="Some text here...">
              </div>
          </div>
      </div>
    </div>
  </div>
</div>
</section>

信息1
信息2
信息0

这就是我得到的

我希望实现以下目标：

有人知道我该怎么解决这个问题吗？一般来说，我对CSS或web并没有真正的经验。如果您认为这不是一个好的设计，请随意建议不同的布局

谢谢你在这方面的帮助

致以最良好的祝愿， 圣地亚哥

信息1
信息2
信息0

信息1
信息2
信息0

<section class="section">
    <div class="columns">
      <div class="column">

        <div class="columns"  style="margin-left: 5px;margin-right: 5px">
          <div class="column" style="margin-right: 5px">

            <div class="field is-horizontal columns">
              <div class="column is-2 is-small has-background-danger">
                  <label class="label">Info 1</label>
              </div>
              <div class="field-body">
                  <div class="field">
                      <div class="control">
                          <input type="text" class="textarea is-small" placeholder="Some text here...">
                      </div>
                  </div>
              </div>
            </div>
          </div>
        <div class="column" style="margin-left: 5px">

          <div class="field is-horizontal columns"  >
            <div class="column is-2 is-small has-background-warning">
                <label class="label">Info 2</label>
            </div>
            <div class="field-body">
                <div class="field">
                    <div class="control">
                        <input type="text" class="textarea is-small" placeholder="Some text here...">
                    </div>
                </div>
            </div>
          </div>


        </div>

        </div>



        <div class="field is-horizontal columns" style="margin: 5px;">
          <div class="column is-1 is-small has-background-primary">
              <label class="label">Info 0</label>
          </div>
          <div class="field-body">
              <div class="field">
                  <div class="control">
                      <input type="text" class="textarea is-small" placeholder="Some text here...">
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>
</section>