title: Angular create vertical timeline
body: <p>I would like to create a Responsive vertical timeline as shown below. 
  sorry, I am backend developer not that strong in CSS.</p>
  
  <p><a href="https://i.stack.imgur.com/2RgPx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2RgPx.png" alt="enter image description here"></a></p>
  
  <p>I was able to achieve something as shown below</p>
  
  <p><a href="https://i.stack.imgur.com/TBJmZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TBJmZ.png" alt="enter image description here"></a></p>
  
  <p>Currently, I am looking for help in positioning my div left right as shown in picture one.</p>
  
  <p>I am planing to use bootstrap and fa Icon</p>
  
  <p>My CSS:</p>
  
  <pre><code>$text-color: #373737;
  $gray-base: #494949;
  $gray-darker: #222;
  $gray-dark: #333;
  $gray: #555;
  $gray-light: #777;
  $gray-lighter: #eee;
  $brand-primary: #1f9eba;
  $brand-success: #59ba1f;
  $brand-info: #5bc0de;
  $brand-warning: #d1bd10;
  $brand-danger: #ba1f1f;
  
  /* Timeline */
  .timeline {
    list-style: none;
    padding: 20px;
    position: relative;
    &amp;:before {
      top: 40px;
      bottom: 0;
      position: absolute;
      content: " ";
      width: 3px;
      background-color: #eeeeee;
      left: 50%;
      margin-left: -1.5px;
    }
    .timeline-item {
      margin-bottom: 20px;
      position: relative;
      &amp;:before,
      &amp;:after {
        content: "";
        display: table;
      }
      &amp;:after {
        clear: both;
      }
      .timeline-badge {
        color: #fff;
        width: 54px;
        height: 54px;
        line-height: 52px;
        font-size: 22px;
        text-align: center;
        position: absolute;
        top: 18px;
        left: 50%;
        margin-left: -25px;
        background-color: $gray-dark;
        border: 3px solid #ffffff;
        z-index: 100;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        i,
        .fa,
        .glyphicon {
          top: 2px;
          left: 0px;
        }
        &amp;.primary {
          background-color: $brand-primary;
        }
        &amp;.info {
          background-color: $brand-info;
        }
        &amp;.success {
          background-color: $brand-success;
        }
        &amp;.warning {
          background-color: $brand-warning;
        }
        &amp;.danger {
          background-color: $brand-danger;
        }
      }
      .timeline-panel {
        position: relative;
        text-align: right;
        width: 46%;
        float: left;
        right: 16px;
        // border: 1px solid $gray-light;
        background: #ffffff;
        border-radius: 2px;
        padding: 20px;
        -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
        &amp;:before {
          position: absolute;
          top: 26px;
          right: -16px;
          display: inline-block;
          border-top: 16px solid transparent;
          border-left: 16px solid $gray-light;
          border-right: 0 solid $gray-light;
          border-bottom: 16px solid transparent;
          // content: " ";
        }
        .timeline-title {
          margin-top: 0;
          color: inherit;
        }
        .timeline-body &gt; p,
        .timeline-body &gt; ul {
          margin-bottom: 0;
        }
        .timeline-body &gt; p + p {
          margin-top: 5px;
        }
      }    
    }
    .timeline-item:last-child {
      &amp;:nth-child(even) {
        float: right;
      }
    }
    .timeline-item:nth-child(even) {
      .timeline-panel {
        float: right;
        text-align: left;
        left: 16px;
        &amp;:before {
          border-left-width: 0;
          border-right-width: 14px;
          left: -14px;
          right: auto;
        }
      }
    } 
  }
  // .timeline-horizontal:extend(.timeline) {
  //   list-style: none;
  //   position: relative;
  //   padding: 20px 0px 20px 0px;
  //   display: inline-block;
  //   &amp;:before {
  //     height: 3px;
  //     top: auto;
  //     bottom: 26px;
  //     left: 56px;
  //     right: 0;
  //     width: 100%;
  //     margin-bottom: 20px;
  //   }
  //   .timeline-item {
  //     display: table-cell;
  //     height: 280px;
  //     width: 20%;
  //     min-width: 320px;
  //     float: none !important;
  //     padding-left: 0px;
  //     padding-right: 20px;
  //     margin: 0 auto;
  //     vertical-align: bottom;
  //     .timeline-panel {
  //       top: auto;
  //       bottom: 64px;
  //       display: inline-block;
  //       float: none !important;
  //       left: 0 !important;
  //       right: 0 !important;
  //       width: 100%;
  //       margin-bottom: 20px;
  //       &amp;:before {
  //         top: auto;
  //         bottom: -16px;
  //         left: 28px !important;
  //         right: auto;
  //         border-right: 16px solid transparent !important;
  //         border-top: 16px solid $gray-light !important;
  //         border-bottom: 0 solid $gray-light !important;
  //         border-left: 16px solid transparent !important;
  //       }
  //     }
  //     &amp;:before,
  //     &amp;:after {
  //       display: none;
  //     }
  //     .timeline-badge {
  //       size: 3em;
  //       top: auto;
  //       bottom: 0px;
  //       left: 43px;
  //     }
  //   }
  // }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-12"&gt;
      &lt;div class="page-header"&gt;
        &lt;h1&gt;Timeline&lt;/h1&gt;
      &lt;/div&gt;
      &lt;ul class="timeline"&gt;
        &lt;li class="timeline-item"&gt;
          &lt;div class="timeline-badge"&gt;
            &lt;fa-icon [icon]="faCheck"&gt;&lt;/fa-icon&gt;
          &lt;/div&gt;
          &lt;div class="timeline-panel"&gt;
            &lt;div class="timeline-heading"&gt;
              &lt;h4 class="timeline-title"&gt;Mussum ipsum cacilds 1&lt;/h4&gt;
              &lt;p&gt;&lt;small class="text-muted"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt; 11 hours ago via Twitter&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div style="float: right; position: relative;text-align: right;"&gt; Hello &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="timeline-item"&gt;
          &lt;div class="timeline-badge"&gt;&lt;i class="glyphicon glyphicon-check"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;div class="timeline-panel"&gt;
            &lt;div class="timeline-heading"&gt;
              &lt;h4 class="timeline-title"&gt;Mussum ipsum cacilds 2&lt;/h4&gt;
              &lt;p&gt;&lt;small class="text-muted"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt; 11 hours ago via Twitter&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="timeline-body"&gt;
              &lt;p&gt;Test&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="timeline-item"&gt;
          &lt;div class="timeline-badge"&gt;&lt;i class="glyphicon glyphicon-check"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;div class="timeline-panel"&gt;
            &lt;div class="timeline-heading"&gt;
              &lt;h4 class="timeline-title"&gt;Mussum ipsum cacilds 3&lt;/h4&gt;
              &lt;p&gt;&lt;small class="text-muted"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt; 11 hours ago via Twitter&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="timeline-body"&gt;
              &lt;p&gt;Test Content 1 &lt;/p&gt;
              &lt;p&gt;Test Content 2 &lt;/p&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="timeline-item"&gt;
          &lt;div class="timeline-badge"&gt;&lt;i class="glyphicon glyphicon-check"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;div class="timeline-panel"&gt;
            &lt;div class="timeline-heading"&gt;
              &lt;h4 class="timeline-title"&gt;Mussum ipsum cacilds 4&lt;/h4&gt;
              &lt;p&gt;&lt;small class="text-muted"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt; 11 hours ago via Twitter&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="timeline-body"&gt;
              &lt;p&gt;Test &lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note: I took this sample from <a href="https://codepen.io/wdmg/pen/ZWmwNM" rel="noreferrer">https://codepen.io/wdmg/pen/ZWmwNM</a> </p>
  
  <p>Any help is much appreciated. </p>