Сгибание по центру приводит к тому, что br после не работает?

Question

Эта сетка работает нормально, за исключением того, что, когда я центрирую текст справа, br перестает работать, так что a оказывается в отдельной строке ... То есть, он отлично работает без ссылки или без центра.

Я могу исправить это с помощью p или div-оболочки вокруг этой коллекции текста, но, может быть, лучше?

Извините за невежество. Спасибо.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.right {
  background-color: lightgray;
  display: flex;
  align-items: center;
}

.left {
  background-color: darkgray;
}

<div class=container>
  <div class="left">
    left<br>left<br>left<br>left
  </div>
  <div class="right">
    <a href="http://www.google.com">google</a><br>right<br>right
  </div>
</div>
&nbsp;
<div class=container>
  <div class="left">
    left<br>left<br>left<br>left
  </div>
  <div class="right">
    google<br>right<br>right
  </div>
</div>

Answer 1

Перепишите свой код так, чтобы он выглядел следующим образом, использование <br> не является хорошим способом разделения отдельных строк текста

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.right {
  background-color: lightgray;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.left {
  background-color: darkgray;
}

/** This will remove the space between the p tags **/
p {
   margin: 0;
}

<div class=container>
  <div class="left">
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
  </div>
  <div class="right">
    <p><a href="http://www.google.com">google</a></p>
    <p>right</p>
    <p>right</p>
  </div>
</div>