How to align p and h3 and button in blocks?

Question

Sass

Friends, good day to all!
The question is:
As in blocks, align the h3, p and button tags.
The fact is that when I enter h3 and P in different blocks due to the different number of characters in the block, the button moves out and it turns out at different levels ...
How can I make All the blocks look symmetrical and the buttons do not move out?
Here is the html section:

<div class="row">
              <div class="col-lg-3">
                <div>
                  <div class="items">
                    <div class="item item_1">
                      <div class="row">
                      <div class="col-lg-12">
                      <div class="zag">
                      <h3>Вариант 1</h3>
                      </div>
                      </div>
                      </div>
                      <p>Тут кнопка высоко"</p>
                      <div class="sbottons">
                    <a href="#callback" class="sbuttons">Как выровнять</a>
                    </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-3">
                <div class="items">
                  <div class="item item_2">
                    <div class="row">
                      <div class="col-lg-12">
                      <div class="zag">
                      <h3>Вариант 2 для сравнения</h3>
                      </div>
                      </div>
                      </div>
                    <p>Тут из-за большего колличества знаков кнопка съезжает"</p>
                    <div class="sbottons">
                    <a href="#callback" class="sbuttons">Заказать консультацию</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-3">
                <div class="items">
                  <div class="item item_3">
                    <h3>Хтелось бы что бы</h3>
                    <p>сохранялся один уровень</p>
                    <div class="sbottons">
                    <a href="#callback" class="sbuttons">Кнопка</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-3">
                <div class="items">
                  <div class="item item_4">
                    <h3>И все кнопки</h3>
                    <p>были на одном уровне, но с учетом условий адаптивности.</p>
                    <div class="sbottons">
                    <a href="#callback" class="sbuttons">Кнопка жми</a>
                    </div>
                  </div>
                </div>
              </div>

            </div>

Here is the block SASS code snippet:

#lp-offer
  margin-bottom: em(65px)
  margin-top: em(55px)
  // .col-lg-3
  // 	min-height: em(15px)
.items 
  max-width: 1000px
  margin: 0px auto 0

.item 
  float: left
  background-color: #fff
  width: 100%
  height: em(400px)
  box-shadow: 0 0 19px rgba(10, 10, 10, 1)
  position: relative
  padding: 70px 10px 10px
  margin: 1%
  text-align: center
  box-sizing: border-box
  outline: 2px solid #32d3ff
  outline-offset: -7px
  h3
  	color: #000
  	text-align: center

  
  .sbottons
  	display: none
  	background-color: #F39F18
  	border: 0
  	padding: 5px
  	font-size: em(18px)
  	font-family: sans-serif
  	
  	a
  		color: #000
  		text-decoration: none
  	box-shadow: 0 3px 0 #B97200
  	border-radius: 10px
  	margin: em(16px)
  	transition: all .5s ease

    

  &:after 
    content: ''
    position: absolute
    top: 20px
    left: 0
    right: 0
    margin: auto
    width: 46px
    height: 46px
    background: url(http://www.sgs66.ru/img/ico-lp-offer-46px.png) no-repeat
  
  &_1 
    &:after 
      background-position: 0 0
    
    &:hover 
      background: url(../img/team/rain.jpg) no-repeat
      background-size: 100%

      &:after  
      	background-position: right 0 
    
  
  &_2 
    &:after 
      background-position: 0 -46px
    
    &:hover 
      background: url(../img/team/rain.jpg) no-repeat
      background-size: 100%
      &:after  
      	background-position: right -46px 
    
  
  &_3 
    &:after 
      background-position: 0 -92px
    
    &:hover 
      background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg) no-repeat
      background-size: 100%
      &:after  
      	background-position: right -92px
    
  
  &_4 
    &:after 
      background-position: 0 -138px
    
    &:hover 
      background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg) no-repeat
      background-size: 100%
      &:after  
      	background-position: right -138px
    
  
  &:hover
    color: #fff
    h3
    	color: #fff

        .sbottons
          display: inline-block
          & a:hover, &:focus
            color: #fff
            text-decoration: none

          &:hover
            background-color: #F3B046

          &:active
            background-color: #986107
            transform: translateY(4px)

        &:before
            // outline-color: #fff
            background-color: #394b5f
            opacity: 0.85px

Is it possible to realize my idea?

Answer 1

here is getbootstrap.com
and here is htmlbook.ru