列空间，CSS网格布局

Question

我正在为待办事项应用程序创建模板HTML CSS页面，并且正在使用网格布局；具有行和列的容器流体。我已经按如下所示隔开了一个按钮，一些文本和另外两个按钮：

<div class="container-fluid">
<div class="row">
    <div class="col-3"></div>
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="flex-heading">
            <i
              class="fas fa-clipboard-list fa-4x icon-backgroundcolor addmain-icon"
            ></i>

            <p class="subhead">ADD ITEM</p>
          </div>

          <hr />
          <div class="row within">
            <div class="col-6">
              <label class="add_line"
                >What do you want to do?</label
              >
            </div>
          </div>
          <div class="row within">
            <div class="col-8">
              <div class="md-form form-group">
                <input
                  type="text"
                  class="form-control"
                  name = "description"
                  [(ngModel)] = "description"
                  placeholder="I want to do something good"
                  (keydown.enter)="onKeydown($event, content)"
                />
              </div>
            </div>
            <div class="col-4">
              <button
                type="button"
                class="btn btn-flat add-button"
                (click)="open(content)"
                
              >
                <i
                  class="fas fa-plus-circle fa-2x add-icon"
                ></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3"></div>
  </div>
</div>

每列之间都有装订线，文本转到下一行。什么是减少装订线空间并释放文本空间的好方法？