How to align text in html and create spacing column between sentences?

Question

Before After How to turn "before" to after using grid in html and css?I want my texts move to the right side

.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>

I've tried lots of method but i cant find to solution for this problem , especially how to create the space between text and text.I'm a new learner , can u guys help me pls! Note: Grid methods only !

Answer 1

This should solve your problem: grid-template-areas

This is a small example of what it could look like:

.firstItem {
  grid-area: rightTop;
}

.secondItem {
  grid-area: rightBottom;
}

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