如何在html中对齐文本并在句子之间创建间距列？

Question

之前 之后 如何在 html 和 css 中使用网格后将“之前”变成之后？我希望我的文本移到右侧

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.needtext {
  font-size: small;
}

pre {
  font-size: small;
}

<div class="grid-container">
  <div class="grid-item">
    <pre class="needtext">Goal
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
         Perspiciatis numquam minus labore saepe, aliquid accusantium
          quaerat nam explicabo ducimus unde eveniet nostrum odit, molestiae
           quis ex dolor blanditiis ipsam ipsum.
    </pre>
  </div>
  <div class="grid-item">
    <pre>Lorem ipsum dolor sit amet consectetur,
     adipisicing elit. Non iure aliquid velit deleniti voluptates veniam quisquam,
      sunt, fugit harum, alias blanditiis?
     Eum mollitia aspernatur numquam magni impedit ducimus quidem sint?</pre>
  </div>
</div>

我已经尝试了很多方法，但我找不到解决这个问题的方法，特别是如何在文本和文本之间创建空间。我是一个新学习者，你们可以帮助我吗！ 注意：仅限网格方法！

Answer 1

这应该可以解决您的问题： 网格模板区域

这是一个小例子：

.firstItem {
  grid-area: rightTop;
}

.secondItem {
  grid-area: rightBottom;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "left left rightTop rightTop"
    "left left rightBottom rightBottom";
}