<div class="container">
    
    <ul class="timeline list-inline">
      
        <li>
          
          <div class="timeline-badge complete">
            
            <i class="glyphicon glyphicon-ok"></i>
            <span class="step-title">
              Analise critica 
            </span>
            <!--<span class="step-date">
              07.15.15  
            </span>-->
          </div> 
          
        </li>
        <li class="green line">
          <span id="x"></span>
        </li>
        <li class="green line">
          <span id="x"></span>
        </li>
        
        <li class="expandible">
          <div class="timeline-badge complete">
            <i class="glyphicon glyphicon-option-horizontal"></i>
            <span class="step-title">
              Amostras 
            </span>
          </div>
          <div id="horizontalContainer" style="width: 200px; margin-top: 100px; float: none">
             <div id="horizontalDiv1" style="float: left">fdsfsdf</div>
             <div id="horizontalDiv3" style="float: left">div2</div>
             <div id="horizontalDiv4" style="float: left"></div>
             <div id="horizontalDiv5" style="float: left"></div>
          </div>
        </li>
      <li class="green-red line">
      </li>
      <li class="green-red-2 line"/>
      </li>
      <li>
        <div class="timeline-badge canceled">
          <i class="glyphicon glyphicon-remove"></i>
          <span class="step-title">
            <p>Avaliação do processo</p>  
          </span>
          <!--<span class="step-date">
              07.15.15 
          </span>-->
        </div>
      </li>
        
    </ul>
</div>

.timeline {
  list-style: none;
  position: relative;
  
}

.list-inline > li{
  padding: 0px !important;
}

span#x{
  display:block;
  width: 100%;
  height: 50px;
  margin-top: -25px;
}

.timeline > li:not(.line){
  position: relative;
  height: 50px;
  width: 50px;
}

.timeline > li{
  position: relative;
  
}

.timeline > li:before,
.timeline > li:after {
  content: "";
}

.timeline > li:after {
  clear: both;
}



.timeline > li:after {
  clear: both;
}

.timeline > li > .timeline-badge {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-style: solid;
  border: 2px solid #ccc;
  
  
}

.timeline-title {
  color: inherit;
}

.line {
  /*display: block;*/
  z-index: 200;
  width: 50px;
  margin-bottom: 20px;
  /*border: 0;*/
  height: 7px;
  /*border-top: 5px solid #ccc;*/
  /*margin: 1em 0;*/
  
  /*margin-left:-31px;
  margin-right: -2px;*/
  position: absolute;
  
  border: 2px solid #ccc;
  border-width: 2px 0;
}

li:nth-child(3n+2){
  margin-left:-6px;
  margin-right: -4px;
}

li:nth-child(3n){
  margin-right:-6px;
}

.complete{
  background: linear-gradient(90deg, green 50%, #ccc 50%);
  color: #fff;
}

.canceled{
  background-color: red;
  color: #fff;
}

.doing{
  background-color: #ccc;
  color: black;
  box-shadow:
    0 0 0 2px green,
    0 0 0 4px #ccc;
  margin: 2px 4px;
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  
}

.green.line{
  background-color: green;
}

.green-red.line{
  background: linear-gradient(to right, green, red 200%);
}
.green-red-2.line{
  background: linear-gradient(to left, red, green 200%);
}

.step-title{
  color: black;
  font-size: 0.6em;
  line-height: 20px;
  display:block;
}

.step-date{
  color: black;
  font-size: 0.7em;
  line-height: 20px;
  display:block;
  white-space: nowrap;
}

.step-date-new-left{
  color: black;

  
  float:left;
  clear: both;
  
  /*background-color: blue;*/
}

.step-date-new-right{
  color: black;
  font-size: 0.7em;
  line-height: 100px;
  display:block;
  white-space: nowrap;
  float:right;
  position:absolute;
  left:80px;
}

$(document).ready(function(){
  $(".expandible").click(function(){
    var $foo = $(this).children(":first");
    var $stepDate = $foo.children('.step-date');
    $(this).css("background-color","blue");
    //$foo.append("");
    $stepDate.hide();
    $foo.append("<span class='step-date-new-left'>Planejamento | 7.7.15 producao | 7.7.15</span>");
    
      $(this).prev().prev().prev().children(":first").children('.step-date').hide();
    $(this).next().next().next().children(":first").children('.step-date').hide();
  });
});