Having trouble getting text to stay to the left

Question

See the icon in my jsfiddle? It stays in place and doesn't move no matter what the screen width is.

However, the text next to it isn't acting in the same way.

I want the text to be RIGHT next to the icon and not move at all even when the div is made smaller from changing the windows width resulting in hiding some of the text.

JSFIDDLE

@charset "UTF-8";
.row {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: inline-block
}
.row.blockDisplay {
	display: block;
}
.column_60 {
	width: 55%;
	float: left;
	margin-top: 0px;
	margin-left:1%;
}
.column_40 {
	width: 44%;
	float: left;
	margin-top: 0px;
}
.columns {
	width: 25%;
	float: left;
	font-family: "Source Sans Pro";
	color: #A5A5A5;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
.row .columns p {
	padding-left: 10%;
	padding-right: 10%;
}


.left_half {
	background-color: #52BAD5;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
	font-weight: bold;
}
 
.right_half {
	background-color: #01B2D1;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
	font-weight: bold;
}
 
 
 

@media (max-width: 320px) {

.secondary_header {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 1px;
	padding-bottom: 40px;
}

.columns {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0PX;
	padding-right: 0PX;
	padding-bottom: 0PX;
	padding-left: 0PX;
}

.column_40.left_half {
	width: 100%;
}
.column_60.right_half {
	width: 100%;
}


}

@media (min-width: 321px) and (max-width: 768px) {
.columns {
	width: 100%;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.column_40.left_half {
	width: 100%;
}
.column_60.right_half {
	width: 100%;
}
}

@media (min-width: 769px) and (max-width: 1000px) {
.columns {
	width: 50%;
	float: left;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.container .columns p {
	padding-left: 25px;
	padding-right: 25px;
}
}


.taskPreviewWrap{
	list-style:none;
	margin-left:-40px;
	margin-top:-5px;
	color:#194e8d;
	}
.taskPreviewWrap li {
	height:auto;
	width:auto;
	background:white;
	border-radius:6px;
	background-color:#011222;
	padding-top:9px;
	margin-top:5px;
	}
.dragdotsicon{
	width:7px;
	height:20px;
	background: url(http://s32.postimg.org/qlhqncer9/dragdots.png);
	margin-left:14px;
	margin-top:9px;
	}
.t-Date {
	font-weight:normal;
	font-size:9pt;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:inline-block;
	vertical-align: top;
	position:relative;
	margin-top:-17px;
	margin-left:-197px;
	letter-spacing:-0.4px;
	}
.t-Date:after {
	content:"";
	width:1px;
	height:29px;
	background-color:#194e8d;
	display: inline-block;
	position:absolute;
	margin-top:-8px;
	margin-left:12px;
	}
.t-ShortDesc{
font-weight:bold;
	font-size:9pt;
	letter-spacing:-0.2px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:inline-block;
	vertical-align: top;
	position:absolute;
	text-overflow: ellipsis; /* will make [...] at the end */
    width: 22%; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
    overflow:hidden; /* older browsers */
	margin-left:24px;
	margin-top:-17px;
	}

<div class="row"></div>
<div class="row blockDisplay">

  <div class="column_40 left_half">
    <ul class="taskPreviewWrap">

      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want everything in this line to stay to the left</span>
      </li>

      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want everything in this line to stay to the left</span>
      </li>

      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want everything in this line to stay to the left</span>
      </li>

    </ul>

  </div>

  <div class="column_60 right_half">
    <h2 class="column_title">RIGHT COLUMN</h2>
  </div>

</div>

Answer 1

Apply text-align: left to .taskPreviewWrap li.

On .t-Date, adjust margin-left: -197px to margin-left: 40px (for example).

Revised Fiddle

@charset "UTF-8";
.row {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: inline-block
}
.row.blockDisplay {
	display: block;
}
.column_60 {
	width: 55%;
	float: left;
	margin-top: 0px;
	margin-left:1%;
}
.column_40 {
	width: 44%;
	float: left;
	margin-top: 0px;
}
.columns {
	width: 25%;
	float: left;
	font-family: "Source Sans Pro";
	color: #A5A5A5;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
.row .columns p {
	padding-left: 10%;
	padding-right: 10%;
}


.left_half {
	background-color: #52BAD5;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
	font-weight: bold;
}
 
.right_half {
	background-color: #01B2D1;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
	font-weight: bold;
}
 
@media (max-width: 320px) {

.secondary_header {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 1px;
	padding-bottom: 40px;
}

.columns {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0PX;
	padding-right: 0PX;
	padding-bottom: 0PX;
	padding-left: 0PX;
}

.column_40.left_half {
	width: 100%;
}
.column_60.right_half {
	width: 100%;
}


}

@media (min-width: 321px) and (max-width: 768px) {
.columns {
	width: 100%;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.column_40.left_half {
	width: 100%;
}
.column_60.right_half {
	width: 100%;
}
}

@media (min-width: 769px) and (max-width: 1000px) {
.columns {
	width: 50%;
	float: left;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.container .columns p {
	padding-left: 25px;
	padding-right: 25px;
}
}

.taskPreviewWrap{
	list-style:none;
	margin-left:-40px;
	margin-top:-5px;
	color:#194e8d;
	}
.taskPreviewWrap li {
	height:auto;
	width:auto;
	background:white;
	border-radius:6px;
	background-color:#011222;
	padding-top:9px;
	margin-top:5px;
    
    text-align: left; /* NEW */
	}
.dragdotsicon{
	width:7px;
	height:20px;
	background: url(http://s32.postimg.org/qlhqncer9/dragdots.png);
	margin-left:14px;
	margin-top:9px;
	}
.t-Date {
	font-weight:normal;
	font-size:9pt;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:inline-block;
	vertical-align: top;
	position:relative;
	margin-top:-17px;
	/* margin-left:-197px; */
    margin-left: 40px; /* NEW */
	letter-spacing:-0.4px;
	}
.t-Date:after {
	content:"";
	width:1px;
	height:29px;
	background-color:#194e8d;
	display: inline-block;
	position:absolute;
	margin-top:-8px;
	margin-left:12px;
	}
.t-ShortDesc{
font-weight:bold;
	font-size:9pt;
	letter-spacing:-0.2px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:inline-block;
	vertical-align: top;
	position:absolute;
	text-overflow: ellipsis; /* will make [...] at the end */
    width: 22%; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
    overflow:hidden; /* older browsers */
	margin-left:24px;
	margin-top:-17px;
	}

<div class="row"></div>
<div class="row blockDisplay">
  <div class="column_40 left_half">
    <ul class="taskPreviewWrap">
      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want all the text and dates in this line to stay to the left next to the dots icon instead of moving due to divs width expanding</span>
      </li>
      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want all the text and dates in this line to stay to the left next to the dots icon instead of moving due to divs width expanding</span>
      </li>
      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want all the text and dates in this line to stay to the left next to the dots icon instead of moving due to divs width expanding</span>
      </li>
    </ul>
  </div>
  <div class="column_60 right_half">
    <h2 class="column_title">RIGHT COLUMN</h2>
  </div>
</div>