How to add a text to the right side of `fa-circle-thin` class in html?

Question

I need to create a layout like the below image.I tried like the below code,but it's difficult to add an text to the right side of fa-circle-thin class.How can I achieve it?

.test {
  height: 100px;
  margin-top: 21px;
  margin-left: 9px;
  position: relative;
  padding-left: 20px;
  border-left: 2px solid #b5b3b5;
}

.modal-body {
  margin: 20px;
}

<div class="modal-body">
  <i class="fa fa-circle-thin" style="font-size:24px;color:#b5b3b5; position: absolute;"></i>
  <div class="test"></div>
  <i class="fa fa-circle-thin" style="font-size:24px;color:#b5b3b5; position: absolute;"></i>
  <div class="test"></div>
  <i class="fa fa-circle-thin" style="font-size:24px;color:#b5b3b5; position: absolute;"></i>
</div>

Answer 1

Can you edit this code.........

/* -------------------------------------
 * For horizontal version, set the
 * $vertical variable to false
 * ------------------------------------- */


/* -------------------------------------
 * General Style
 * ------------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  font-size: 100%;
  font-family: "Noto Sans", sans-serif;
  color: #eee9dc;
  background: #48b379;
}

h2 {
  margin: 3em 0 0 0;
  font-size: 1.5em;
  letter-spacing: 2px;
  text-transform: uppercase;
}


/* -------------------------------------
 * timeline
 * ------------------------------------- */

#timeline {
  list-style: none;
  margin: 50px 0 30px 120px;
  padding-left: 30px;
  border-left: 8px solid #eee9dc;
}

#timeline li {
  margin: 40px 0;
  position: relative;
}

#timeline p {
  margin: 0 0 15px;
}

.date {
  margin-top: -10px;
  top: 50%;
  left: -158px;
  font-size: 0.95em;
  line-height: 20px;
  position: absolute;
}

.circle {
  margin-top: -10px;
  top: 50%;
  left: -44px;
  width: 10px;
  height: 10px;
  background: #48b379;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}

.content {
  max-height: 20px;
  padding: 50px 20px 0;
  border-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}

.content:before,
.content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}

.content:before {
  border-right-color: inherit;
  border-width: 20px;
  top: 50%;
  margin-top: -20px;
}

.content:after {
  border-right-color: #48b379;
  border-width: 17px;
  top: 50%;
  margin-top: -17px;
}

.content p {
  max-height: 0;
  color: transparent;
  text-align: justify;
  word-break: break-word;
  hyphens: auto;
  overflow: hidden;
}

label {
  font-size: 1.3em;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top: 20px;
  transition: transform 0.2s linear;
}

.radio {
  display: none;
}

.radio:checked+.relative label {
  cursor: auto;
  transform: translateX(42px);
}

.radio:checked+.relative .circle {
  background: #f98262;
}

.radio:checked~.content {
  max-height: 180px;
  border-color: #eee9dc;
  margin-right: 20px;
  transform: translateX(20px);
  transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}

.radio:checked~.content p {
  max-height: 200px;
  color: #eee9dc;
  transition: color 0.3s linear 0.3s;
}


/* -------------------------------------
 * mobile phones (vertical version only)
 * ------------------------------------- */

@media screen and (max-width: 767px) {
  #timeline {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  #timeline li {
    margin: 50px 0;
  }
  label {
    width: 85%;
    font-size: 1.1em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    transform: translateX(18px);
  }
  .content {
    padding-top: 45px;
    border-color: #eee9dc;
  }
  .content:before,
  .content:after {
    border: solid transparent;
    bottom: 100%;
  }
  .content:before {
    border-bottom-color: inherit;
    border-width: 17px;
    top: -16px;
    left: 50px;
    margin-left: -17px;
  }
  .content:after {
    border-bottom-color: #48b379;
    border-width: 20px;
    top: -20px;
    left: 50px;
    margin-left: -20px;
  }
  .content p {
    font-size: 0.9em;
    line-height: 1.4;
  }
  .circle,
  .date {
    display: none;
  }
}

<h2>CSS3 Timeline</h2>

<ul id='timeline'>
  <li class='work'>
    <input class='radio' id='work5' name='works' type='radio' checked>
    <div class="relative">
      <label for='work5'>Lorem ipsum dolor sit amet</label>
      <span class='date'>12 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum
        non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work4' name='works' type='radio'>
    <div class="relative">
      <label for='work4'>Lorem ipsum dolor sit amet</label>
      <span class='date'>11 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum
        non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work3' name='works' type='radio'>
    <div class="relative">
      <label for='work3'>Lorem ipsum dolor sit amet</label>
      <span class='date'>10 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum
        non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work2' name='works' type='radio'>
    <div class="relative">
      <label for='work2'>Lorem ipsum dolor sit amet</label>
      <span class='date'>09 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum
        non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work1' name='works' type='radio'>
    <div class="relative">
      <label for='work1'>Lorem ipsum dolor sit amet</label>
      <span class='date'>08 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum
        non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
</ul>

Answer 2

This is a great use case for css pseudo-selectors. Take a look at this (updated) fiddle or snippet below and let me know if you have an specific questions.

.modal-body{
  margin: 20px;
}

.circle-wrapper {
  position: relative;
}
.circle-wrapper::after {
  height: 50px;
  border-left: 2px solid #b5b3b5;
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  top: 21px;
}

.circle-wrapper::before {
  height: 46px;
  border-left: 2px solid #b5b3b5;
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  top: -44px;
}

.circle-wrapper:last-child::after {
  display: none;
}

.circle-wrapper:first-child::before {
  display: none;
}
.modal-body .fa {
    font-size: 24px;
    color: #b5b3b5;
    display: inline;
    vertical-align: middle;
}

.modal-body .text {
  vertical-align: middle;
  margin-left: 10px;
}

.inner-circle .fa {
   font-size: 16px;
}

.inner-circle {
  font-size: 12px;
  margin-left: 50px;
  position: relative;
  height: 35px;
}

.inner-circle::before {
  height: 22px;
  border-left: 1px solid #b5b3b5;
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  top: 2px;
}

.inner-circle:last-child::after {
  height: 18px;
  border-left: 1px solid #b5b3b5;
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  top: 36px;
}

.inner-circle:last-child {
  height: 50px;
  margin-bottom: 5px;
}
.inner-contents {
  position: relative;
  top: 22px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">

<div class="modal-body">
      <div class="circle-wrapper">
          <div class="outer-circle">
            <i class="fa fa-circle-thin"></i>
            <span class="text">Test code</span>
          </div>
          <div class="inner-circle">
              <div class="inner-contents">
                  <i class="fa fa-circle-thin"></i>
                  <span class="text">Test code inner</span>
              </div>
          </div>
          <div class="inner-circle">
              <div class="inner-contents">
                  <i class="fa fa-circle-thin"></i>
                  <span class="text">Test code inner 2</span>
              </div>
          </div>
      </div>
      <div class="circle-wrapper">
        <div class="outer-circle">
              <i class="fa fa-circle-thin"></i>
              <span class="text">Test code 2</span>
          </div>
          <div class="inner-circle">
              <div class="inner-contents">
                  <i class="fa fa-circle-thin"></i>
                  <span class="text">Test code inner</span>
              </div>
          </div>
          <div class="inner-circle">
              <div class="inner-contents">
                  <i class="fa fa-circle-thin"></i>
                  <span class="text">Test code inner 2</span>
              </div>
          </div>
      </div>
      <div class="circle-wrapper">
          <div class="outer-circle">
            <i class="fa fa-circle-thin"></i>
            <span class="text">Test code 3</span>
          </div>
      </div>
  </div>