Align elements for RTL language

Question

I need to show news in vertical timeline below example is perfect for what i am looking for this i can modify further to my requirement but i need same for English & Arabic language. English version : https://codepen.io/jplhomer/pen/lgfus

Modified version for Arabic (RTL) https://codepen.io/anon/pen/LboryL

@import "compass/css3";

$gray: #dddddd;

h1, h2, h3 {
  font-weight: 300;
}

.container {
  padding: 1em;
}

.timeline {
  position: relative;
  overflow: auto;


  &:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 5px;
    background: $gray;
    right: 0;
  }

  h2 {
    background: $gray;
    max-width: 6em;
    margin: 0 auto 1em;
    padding: 0.5em;
    text-align: center;
    position: relative;
    clear: both;
  }

  ul {
    list-style: none;
    padding: 0 1em 0 0 ;
    z-index: 1;
  }

  li {
    background: $gray;
    padding: 1em;
    margin-bottom: 1em;
    position: relative;
    direction:rtl;
    text-align:right;

    &:before {
      content: '';
      width: 0;
      height: 0;
      border-top: 1em solid $gray;
      border-right: 1em solid transparent;
      position: absolute;
      right: -1em;
      top: 0;
    }
  }

  h3 {
    margin-top: 0;
  }

  time {
    font-style: italic;
  }
}

@media screen and (min-width: 40em) {
  .container {
    max-width: 1000px;
    margin: 0 auto;
  }

  .timeline {
    &:before {
      left: 50%;

    }

    ul {
      padding-left: 20px;
      max-width: 700px;
      margin: 0 auto;

    }

    li {
      width: 42%;
    }

    li:nth-child(even) {
      float: left;
      margin-top: 2em;
    }

    li:nth-child(odd) {
      float: right;

      &:before {
        border-top: 1em solid $gray;
        border-right: 1em solid transparent;
        left: auto;
        right: -1em;
      }
    }

    li:nth-of-type(2n+1) {
      clear: both;
    }
  }
}

I have modified CSS to work with RTL language but the pointer for the First Element ul is showing arrow on right side which i tried to show on left breaks the arrow. I tried few thing but one or the other thing breaks in this

Answer 1

I fixed it by making changes to

li:nth-child(odd) {
  float: right;

  &:before {
    border-top: 1em solid $gray;
    border-left: 1em solid transparent;
    right: auto;
    left: -1em;
  }
}

Working solution: https://codepen.io/anon/pen/LboryL