Implement text-align: left on the elements within .taskPreviewWrap li.
For elements with class .t-Date, adjust margin-left: -197px to margin-left: 40px as needed.
Improved Fiddle Link
@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;
...
.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 as necessary */
white-space: nowrap; /* single line paragraph */
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>