Text flow interupted by absolute positioned element

Question

I am trying to build a chat box and position arrive time inside the message div by positioning it as absolute and placing it relative to parent but it is overlapping with chat content.How to position arrived time span so it does not overlap with the message and stay at respective positions

html

<div class="chat-box">
  <input type="checkbox" />
  <label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
  <div class="chat-box-content">
    <div class="msgWrapper">
      <div class="msgwrapperleft">
        <div class="icon">
          <img src="http://placehold.it/40X40"></img>
        </div>
        <div class="Message">Message from Client
          <span class="ArrivedTime">1 minute ago</span>
        </div>

      </div>
    </div>

    <div class="msgWrapper">
      <div class="msgwrapperleft">
        <div class="icon">
          <img src="http://placehold.it/40X40"></img>
        </div>
        <div class="Message">Message from Client
          <span class="ArrivedTime">1 minute ago</span>
        </div>

      </div>
    </div>
    <div class="msgWrapper">
      <div class="msgwrapperleft">

        <div class="Message">Message from Client
          <span class="ArrivedTime">1 minute ago</span>
        </div>
        <div class="icon">
          <img src="http://placehold.it/40X40"></img>
        </div>

      </div>
    </div>
  </div>
  <input type="text" />
</div>

css

body {
    height:3000px
}
.chat-box {
    font:normal normal 11px/1.4 Tahoma, Verdana, Sans-Serif;
    color:#333;
    width:300px;
    /* Chatbox width */
    border:1px solid #344150;
    border-bottom:none;
    background-color:white;
    position:fixed;
    right:10px;
    bottom:0;
    z-index:9999;
    -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
    -moz-box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
    box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
    border-top-left-radius:4px;

}
.chat-box > input[type="checkbox"] {
    display:block;
    margin:0 0;
    padding:0 0;
    position:absolute;
    top:0;
    right:0;
    left:0;
    width:100%;
    height:26px;
    z-index:4;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    border-top-left-radius:4px;
}
.chat-box > label {
    display:block;
    height:24px;
    line-height:24px;
    background: url(http://i60.tinypic.com/244tirb.jpg) -100% 0 #24201a;
    color:white;
    font-weight:bold;
    padding:0 1em 1px;
    border-top-left-radius:4px;
}
.chat-box > label:before {
    content:attr(data-collapsed)
}
.chat-box .chat-box-content {
    padding:10px;
    display:none;
    overflow-y:scroll;
}
/* hover state */
 .chat-box > input[type="checkbox"]:hover + label {
    background-color:#404D5A
}
/* checked state */
 .chat-box > input[type="checkbox"]:checked + label {
    background-color:#212A35
}
.chat-box > input[type="checkbox"]:checked + label:before {
    content:attr(data-expanded)
}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {
    display:block
}
span {
    display: inline-block;
    max-width: 200px;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-color: grey;
}
left {
    float: left;
}
span.left:after {
    content:"";
    display: inline-block;
    position: absolute;
    left: -8.5px;
    top: 7px;
    height: 0px;
    width: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid white;
}
span.left:before {
    content:"";
    display: inline-block;
    position: absolute;
    left: -9px;
    top: 7px;
    height: 0px;
    width: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid black;
}
span.right:after {
    content:"";
    display: inline-block;
    position: absolute;
    right: -8px;
    top: 6px;
    height: 0px;
    width: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #dbedfe;
}
span.right:before {
    content:"";
    display: inline-block;
    position: absolute;
    right: -9px;
    top: 6px;
    height: 0px;
    width: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid black;
}
span.right {
    float: right;
    background-color: #dbedfe;
}
.clear {
    clear: both;
}
input[type="text"] {
    width:96%;
    margin:1%;
}
.msgWrapper {
    width:100%;
    padding:5px;
    float:left;
  position:relative;
    margin:0 0 2px  0;

}
.msgwrapperleft {
    float:left;
    width:100%;
    position:relative;

}
.iconright {
    float:left;
    width:18%;
    margin:1%;
}
.iconleft {
    float:right;
    width:18%;
    margin:1%;
}
 .iconleft img {
    border-radius:40px;
}
.iconright img {
    border-radius:40px;
}
.MessageRight {
  float:left;
    width:74%;
    padding:2%;
    margin:1%;


}
.MessageLeft {
  float:left;
    width:74%;
    padding:2%;
    margin:1%;

  text-align:right;

}
.Time {
    width:100%;
}
 .ArrivedTimeRight {

    position:absolute;
    bottom:-5px;
    right:2px;

     font-size:7px;
}
.ArrivedTimeleft
{

    position:absolute;
    bottom:-5px;
    left:2px;

     font-size:7px;
}
.chat-box:after {
    content:"";
    display: inline-block;
    position: absolute;
    right: -1px;
    top: -14px;
    height: 15px;
    width: 100px;
    background: url(http://i60.tinypic.com/244tirb.jpg) -100% 0 #24201a;
    border-top-left-radius:15px;
    border-top-right-radius:4px;

}

Demo

Answer 1

https://jsfiddle.net/tfyzao9j/6/

I changed the time stamps to position: relative; and set their position to to bottom: 0; and left: 0; or right: 0; respectively.