DIV lose the alignment if it is with a number of different rows

Navigation
0

I'm trying to align some DIVs but I realized that when the DIV that is next to the other is not with the same line number in <p> it just loses alignment, I'm developing in Laravel using BLADE and implanted the VIEWS

Follow the 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

Follow 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;
  }

}

    
asked by anonymous 13.11.2018 / 19:44

1 answer

1

Add vertical-align:top to 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
}
    
13.11.2018 / 20:18
AJAX completes the URL from where it was called Select TD javascript