html - How can I align only one item inside a css grid to the right?

Question

 div {
      display:grid;
      grid-template-columns: repeat(2,1fr);
      width: 300px;
      background-color: lightyellow;
    }

    .left {
      grid-column: 1/2;
      visibility: hidden;
    }
    .left:before {
    content: "<";
    visibility: visible;
    width: 50px;
    }

    .right {
      grid-column: 2/3;
      visibility: hidden;
    }
    .right:before {
    content: "<";
    visibility: visible;
    width: 50px;
    }

    <div>
      <a class="left" href="#"> Left </a>
      <a class="right" href="#"> Right </a>
    </div>

question from:https://stackoverflow.com/questions/65917907/how-can-i-align-only-one-item-inside-a-css-grid-to-the-right

Answer 1

you just need to add text-align: right;

div {
  display:grid;
  grid-template-columns: repeat(2,1fr);
  width: 300px;
}

.left {
  grid-column: 1/2;
}

.right {
  grid-column: 2/3;
  text-align: right;
  background-color: red;
}

<div>
  <a class="left" href="#"> Left </a>
  <a class="right" href="#"> Right </a>
</div>