_available-languages.html

<div class="grid-row">
  <div class="available-languages">
    <ul>
      <li class="translation">
        <span>English</span>
      </li>
      <li class="translation last">
        <a lang="cy" hreflang="cy" href="/dechrau">Cymraeg</a>
      </li>
    </ul>
  </div>
</div>

_available-languages.scss

.available-languages {
  @include grid-column(1 / 3, tablet, right);

  ul {
    @extend %contain-floats;
    list-style: none;
    padding: $gutter-half 0 $gutter-one-third;
    border-bottom: 1px solid $border-colour;

    li {
      float: left;
      display: block;
      border-right: 1px solid $border-colour;
      padding: 0 $gutter-one-third 0 0;
      height: 16px;
      margin: 3px $gutter-one-third 2px 0;

      &.last {
        border-right: 0;
      }

      a,
      span {
        display: block;
        margin-top: -1px;
        @include core-16;
      }

      .direction-rtl & {
        direction: rtl;
        float: right;
        text-align: start;
        border-left: 1px solid $border-colour;
        border-right: 0;
        margin: 3px 0 2px $gutter-one-third;
        padding: 0 0 0 $gutter-one-third;

        &.last {
          border-left: 0;
        }
      }
    }
  }
}