col-Md-6 occupying all space

Question

In my contact form I need to leave on one side some information about the contact, and on the other side a form with email and message. But the part of my form of information is occupying everything, and when I try to add the email input it drops down.

In the orange part was to stay the email input.

.col-md-12 {
  background-color: red;
}

.col-md-6 {
  background-color: blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="contato-content display-table">
  <div class="container">
    <div class="col-md-12">
      <div class="col-md-6 ">
        <h1>Fale conosco</h1>
        <div class="linha-separador mt-2"></div>
        <p class="mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cupiditate aliquid molestiae non obcaecati</p>
        <div class="contato-itens">
          <div class="circulo-itens mr-5"><i class="fas fa-phone"></i>
            <p class="mt-5">xxxx</p>
          </div>
          <div class="circulo-itens  mr-5"><i class="far fa-envelope"></i>
            <p class="mt-5">xxxx</p>
          </div>
          <div class="circulo-itens  mr-5"><i class="fas fa-map-marker-alt"></i>
            <p class="mt-5">xxxx</p>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <form>
          <input class="form-control form-control" type="text" placeholder="EMAIL">
        </form>
      </div>

    </div>
  </div>
</div>

Answer 1

Instead of placing the two columns col-md-6 within a column col-md-12, why not put inside a row? The row occupies the 12 columns and does not have the spacings that a column has, which breaks its layout.

.col-md-12 {
  background-color: red;
}

.col-md-6 {
  background-color: blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="contato-content display-table">
  <div class="container">
    <div class="row">
      <div class="col-md-6 ">
        <h1>Fale conosco</h1>
        <div class="linha-separador mt-2"></div>
        <p class="mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cupiditate aliquid molestiae non obcaecati</p>
        <div class="contato-itens">
          <div class="circulo-itens mr-5"><i class="fas fa-phone"></i>
            <p class="mt-5">xxxx</p>
          </div>
          <div class="circulo-itens  mr-5"><i class="far fa-envelope"></i>
            <p class="mt-5">xxxx</p>
          </div>
          <div class="circulo-itens  mr-5"><i class="fas fa-map-marker-alt"></i>
            <p class="mt-5">xxxx</p>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <form>
          <input class="form-control form-control" type="text" placeholder="EMAIL">
        </form>
      </div>

    </div>
  </div>
</div>

Answer 2

The Bootstrap in version 3.x this worked, however in the current version 4.x apparently the .col-* requires a father .row, I believe this must be because of the scheme of flex-box.

Note. In the code below I changed .col-md-* for .col-* this so that it obeys the size in smaller screens. If I’m not mistaken just setting the size md smaller screens used the equivalent of .col-12

.col-12 {
  background-color: red;
}

.col-6 {
  border:blue solid 1px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="contato-content display-table">
    <div class="container">
        <div class='row'> <!-- adicionado -->
            <div class="col-12">
                <div class='row'> <!-- adicionado -->
                    <div class="col-6">
                        <h1>Fale conosco</h1>
                        <div class="linha-separador mt-2"></div>
                        <p class="mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cupiditate aliquid molestiae non obcaecati</p>
                        <div class="contato-itens">
                            <div class="circulo-itens mr-5">
                                <i class="fas fa-phone"></i>
                                <p class="mt-5">xxxx</p>
                            </div>
                            <div class="circulo-itens  mr-5">
                                <i class="far fa-envelope"></i>
                                <p class="mt-5">xxxx</p>
                            </div>
                            <div class="circulo-itens  mr-5">
                                <i class="fas fa-map-marker-alt"></i>
                                <p class="mt-5">xxxx</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <form>
                            <input class="form-control form-control" type="text" placeholder="EMAIL">
                        </form>
                    </div>
                </div> <!-- fim row interna -->
            </div> <!-- fim col-12 -->
        </div> <!-- fim da row externa -->
    </div> <!-- fim do container -->
</div> <!-- fim contato-content -->