Jumping DIV while vertically aligning text in css

Question

i am facing a little misundestanding while aligning the text in css. I have different text inside 4 divs. The text might be changed with time, but the height and width property should remain. As i gave a div heigth and width and tried to set vertical align middle it turned out, that one block with the most text floats down a little and it seems the it is aligning the text in the container instead of making them stay in one line. Could you , please, tell me what's going wrong and what is the solution. Here is the code:

 .buttons{
        width: 970px;
        height: 160px;
        margin: 0 auto;
        padding-top: 70px;}

.s2-btn {
        cursor: pointer;
        display: inline-flex;
        justify-content: center; /* align horizontal */
        align-items: center; /* align vertical */
        line-height: 1.2;
        margin-right: 30px;
        &:last-child {
            margin-right: 0;
        }
  
.btn-gold {
    color: #000;
    cursor: pointer;
    font-size: 18px;
    height: 90px;
    width: 215px;
    padding: 0;
    background: linear-gradient(to left, #D6B968, #FFF5AA, #C49C00 40%, #FFF5AA, #D6B968);

}

<div class="buttons">
                        <a href="#"><div class="btn-gold s2-btn">Lorem Ipsum is simply dummy text</div></a>
                        <a href="#" ><div class="btn-gold s2-btn">Lorem Ipsum is simply dummy text</div></a>
                        <a href="#" ><div class="btn-gold s2-btn">Lorem Ipsum is simply dummy text of the printing</div></a>
                        <a href="#" ><div class="btn-gold s2-btn">Lorem Ipsum is simply dummy text</div></a>
                   </div>

Answer 1

Try to check this out ..

EDIT: Added few explanation on updates made.

HTML:

1. Make div as the container and not as the child of an anchor tag.

Do not make an anchor tag a container.

CSS:

1. Added css calc() on s2-button to add widths on each div / container

Note css calc() is not widely supported yet.

Consider this as your stepping stones few edits on your css and you don't need to use calc.

2. Remove margin-right on s2-button

.buttons{
  width: 970px;
  height: 160px;
  margin: 0 auto;
  padding-top: 70px;}

.s2-btn {
  cursor: pointer;
  width: calc(25% - 30px);
  display: inline-flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  line-height: 1.2;
  text-align:center;
  &:last-child {
    margin-right: 0;
  }

  .btn-gold {
    color: #000;
    cursor: pointer;
    font-size: 18px;
    height: 90px;
    width: 215px;
    padding: 0;
    background: linear-gradient(to left, #D6B968, #FFF5AA, #C49C00 40%, #FFF5AA, #D6B968);

  }

<div class="buttons">
  <div class="btn-gold s2-btn">
    <a href="#">Lorem Ipsum is simply dummy text</a>
  </div>
  <div class="btn-gold s2-btn">
    <a href="#" >Lorem Ipsum is simply dummy text</a>
  </div>
  <div class="btn-gold s2-btn">
    <a href="#" >Lorem Ipsum is simply dummy text of the printing</a>
  </div>
  <div class="btn-gold s2-btn">
    <a href="#" >Lorem Ipsum is simply dummy text</a>
  </div>
</div>