How to align two form input boxes with each other?

Question

I have a modal with a form (using Bootstrap-Vue and Vue2). Each row has two fields. If user does not enter a valid value to the field, the state of the field returns false, making the box to be colored with red and add a message under the field. But I want both of the fields (in the same row) to be aligned with each other. The problem:

When I don't show an error, it looks good:

The code:

<div class="text-right">
  <div class="row">
    <div class="col-md-6">
      <div class="modal-label">שדה 1</div>
      <b-form-input
       :class="{ 'invalid-form-box': !stateField1(), 'modal-input': true}"
       v-model="course_number"
       type="number"
       placeholder="שדה 1"
       :trim="trimInput"/>
      <p v-if="!stateField1()" class="invalid-form-text">
        לא חוקי 1
      </p>
      <p v-if="!stateField2() && stateField1()" class="invalid-form-text"></p>
    </div>

    <div class="col-md-6">
      <div class="modal-label">שדה 2</div>
      <b-form-input
       :class="{ 'invalid-form-box': !stateField2(), 'modal-input': true}"
       v-model="score"
       type="number"
       placeholder="שדה 2"
       :trim="trimInput"/>
      <p v-if="!stateField2()" class="invalid-form-text">
        לא חוקי 2
      </p>
      <p v-if="!stateField1() && stateField2()" class="invalid-form-text"></p>
    </div>
  </div>
...
</div>

<style scoped>
  div {
    margin: auto 0;
    direction: rtl;
  }

  input {
    direction: rtl;
  }

  .modal-label {
    margin-bottom: 0.5rem;
  }

  .modal-input {
    margin-bottom: 0.5rem;
  }

  .modal-header .close {
    padding: 1rem 1rem !important;
    margin: -1rem auto -1rem -1rem !important;
  }
  
  .invalid-form-text {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
  }

  .invalid-form-box:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%);
    background-repeat: no-repeat;
  }

  .invalid-form-box {
    border-color: #dc3545;
    background-repeat: no-repeat;
  }
</style>

How can I make them aligned? I tried to replace <p> with <div>, <label> and <span>. Also tried to use <br>.

Answer 1

The shifting is caused by the margin: auto 0; rule in:

div {
  margin: auto 0; ❌ causes layout shift when error message appears
}

That rule sets the top and bottom margins of all divs to auto. Notice the vertical margins of the divs (div.col-md-6 and div.modal-label) when there is no error:

And when there is an error, the outer margins collapse to make room:

Solution

I think you were only trying to set the horizontal margins to 0. You can do that with:

div {
  margin-right: 0;
  margin-left: 0;
}

demo