Bootstrap вертикальная сетка рядом

Question

Мне трудно объяснить, что я пытаюсь сделать, но, надеюсь, это имеет смысл.Я создаю две сетки начальной загрузки для хранения расширяющихся текстовых полей.Как на скриншоте ниже:

Чего я пытаюсь достичь

Однако с помощью кода, который я использую, он выглядит как ниже;

Поле, опускающееся вниз с правой стороны, вызывает падение левой стороны, даже если они находятся в отдельных строках

Мой код указан ниже.

<div class="container">
<div class="row">
<div class="col col-lg-6">
<div class="row">
<div class="col-lg-12"></div>
<div class="col-lg-12"></div>
</div>
</div>
<div class="col col-lg-6">
<div class="row">
<div class="col-lg-12"></div>
<div class="col-lg-12"></div>
</div>
</div>
</div>

Как мне правильно настроить эту работу?

Answer 1

Это должно делать то, что вы хотите

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <!-- left column -->
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Item #1
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
          <div class="card-body">
            Text 
          </div>
        </div>
      </div>
      <div class="card mt-3">
        <div class="card-header" id="headingThree">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Item #3
            </button>
          </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
          <div class="card-body">
            Text 
          </div>
        </div>
      </div>
    </div>
    <!-- right column -->
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Item #2
            </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
          <div class="card-body">
            Text
          </div>
        </div>
      </div>
      <div class="card mt-3">
        <div class="card-header" id="headingFour">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
              Collapsible Item #4
            </button>
          </h5>
        </div>
        <div id="collapseFour" class="collapse" aria-labelledby="headingFour">
          <div class="card-body">
            Text
          </div>
        </div>
      </div>
    </div>
  </div>
</div>