DIV lose alignment if it is with a number of different lines

Question

I’m trying to line up some divs but I realized that when the div that’s on the other side is not with the same line number on <p> it simply loses alignment, I am developing in Laravel using BLADE and implatada the VIEWS

Follows HTML:

@extends('layouts.DeltaLayout')
@section('content')
    <div class="div-center-project-search">
        @foreach($projects as $project)
            <div class="div-project">
                <div class="div-info-project-search">
                    <p><b>Projeto:</b>  {{ $project->title }}</p>
                    <p><b>Descrição:</b>  {{ $project->description }}</p>
                    <p><b>Data de entrega:</b>    {{ $project->deadline }}</p>
                </div>
                <div class="buttons">
                    <a class="btn btn-success" href="/">Confirmar</a>
                    <br>
                    <a class="btn btn-cancel" href="/">Deletar</a>
                    <br>
                    <a class="btn btn-bar" href="/">Detalhes</a>
                    <br>
                    <a class="btn btn-bar col-sm" href="/">Editar</a>
                </div>
            </div>
        @endforeach
    </div>
@endsection

Follows SCSS:

.div-center-project-search
{
  text-align: center;
}

.buttons a
{
  margin-bottom: 5px;
  width: 100%;

}

.div-project
{
  background-color: #1d68a7;
  display: inline-block;
  border-radius: 12px;
  padding: 10px;
  text-align: left!important;
  margin-bottom: 5px;
  width: 90%;

}

@include media-breakpoint-up(sm)
{
  .buttons
  {
    height: 100%;
  }

  .div-project
  {
    width: 45%;
  }

}

@include media-breakpoint-up(md) {


  .div-project
  {
    width: 45%;
  }

  .div-info-project-search
  {
    display: inline-block;
    width: 68%!important;
  }

  .buttons
  {
    width: 30%;
    float: right!important;
  }

}

Answer 1

Add the vertical-align:top in your CSS.

.div-project
{
  background-color: #1d68a7;
  display: inline-block;
  border-radius: 12px;
  padding: 10px;
  text-align: left!important;
  margin-bottom: 5px;
  width: 90%;
  /*Corrigir o seu problema.*/
  vertical-align: top
}