I need 2 centred lines of text in a responsive rectangle (HTML/CSS) [duplicate]

This question already has an answer here:

• How do I vertically center text with CSS? 36 answers

Only just started with web dev and this is one of my first exercises. I need the text to be responsive too, but ive researched so much from so many different sources that now my code feels all frankensteined.

At the very least the first and second lines need to be centered vertically.

.flex-rectangle {
  position: absolute;
  width: 100%;
  background: transparent;
  border-left: 25px solid #efdd23;
  border-right: 25px solid #efdd23;
}

.flex-rectangle:before {
  content: "";
  display: block;
  padding-top: 50%;
}

.flex-content div {
  display: table-cell;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  vertical-align: middle;
  color: black;
  font-family: 'Source Sans Pro';
  font-weight: 200;
  font-size: 30px;
  letter-spacing: 5px;
}

<div class="flex-rectangle">
  <div class="flex-content">
    <div>


      First Line
      <div>
        second line
      </div>



    </div>

  </div>
</div>