Bootstrap 4 Flex Grid row overlfow

Question

I am using a Bootstrap 4 with Flex Grid.

My goal is to display some help text next to the input field describing the input field in detail. The help should be displayed upon pressing the help/info icon next to the input field.

As you can see from the screenshot the rows on the left have a gap. I would like to get rid of the gap on the left.

This diagram shows how it actually should be.

The row on the right should overflow, because the input fields are all max 50% width.

I am not sure if that is the right Approach at all, but the initial idea was that if it would work like shown in the diagram I just had to display the help text and it would be already in line with the input fields.

  <form>
    <section class="form-block">
      <label>Application Configuration</label>
      <div class="form-group row">
        <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
          <label class="form-control" for="aForm_1">DNS Entry
            <clr-icon shape="info-circle"></clr-icon>
          </label>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <input class="form-control" type="text" id="aForm_1" placeholder="Enter value here" size="55">
        </div>
        <div class="col-lg-1">
          <clr-icon shape="info-circle"></clr-icon>
        </div>
        <div class="col-lg-6">
          <h3>Help Text</h3>
          <p>
            <span>Some helping text or description.</span>
            <span>Festus, nobilis dominas absolute contactus de emeritis, dexter ignigena.</span>
            <span>Festus, nobilis dominas absolute contactus de emeritis, dexter ignigena.</span>
            <span>Festus, nobilis dominas absolute contactus de emeritis, dexter ignigena.</span>
          </p>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
          <label class="form-control" for="aForm_2">Another form field</label>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <input class="form-control" type="password" id="aForm_2" placeholder="Enter another value here" size="35">
        </div>
      </div>
      <div class="form-group row">
        <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
          <label class="form-control" for="aForm_3">A select box</label>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <div class=" form-control select">
            <select id="aForm_3">
              <option>Option 1</option>
              <option>Option 2</option>
              <option>Option 3</option>
              <option>Option 4</option>
            </select>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
          <label class="form-control" for="aForm_4">Textarea</label>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <textarea class="form-control" id="aForm_4" rows="5"></textarea>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
        <button type="submit" class="btn btn-primary">Button</button>
      </div>
    </section>
  </form>

Answer 1

set a max-height on the column that holds the help text:

      <div class="col-lg-6" style="max-height:45px;">
        <h3>Help Text</h3>