1
Sehen Sie die 
Symbol in meinem jsfiddle? Es bleibt an Ort und Stelle und bewegt sich nicht, egal wie groß die Bildschirmbreite ist.Haben Sie Probleme, Text auf der linken Seite zu bleiben
Der Text daneben verhält sich jedoch nicht auf die gleiche Weise.
Ich möchte, dass der Text neben dem Symbol 
RECHTS ist und überhaupt nicht bewegt, auch wenn das div kleiner wird durch Ändern der Fensterbreite, was dazu führt, dass ein Teil des Textes ausgeblendet wird.
@charset "UTF-8";
.row {
\t width: 100%;
\t margin-top: 0px;
\t margin-right: 0px;
\t margin-bottom: 0px;
\t margin-left: 0px;
\t padding-top: 0px;
\t padding-right: 0px;
\t padding-bottom: 0px;
\t padding-left: 0px;
\t display: inline-block
}
.row.blockDisplay {
\t display: block;
}
.column_60 {
\t width: 55%;
\t float: left;
\t margin-top: 0px;
\t margin-left:1%;
}
.column_40 {
\t width: 44%;
\t float: left;
\t margin-top: 0px;
}
.columns {
\t width: 25%;
\t float: left;
\t font-family: "Source Sans Pro";
\t color: #A5A5A5;
\t line-height: 24px;
\t padding-top: 10px;
\t padding-bottom: 10px;
\t text-align: justify;
\t margin-top: 15px;
\t margin-bottom: 15px;
\t padding-left: 0px;
\t padding-right: 0px;
\t margin-left: 0px;
\t margin-right: 0px;
}
.row .columns p {
\t padding-left: 10%;
\t padding-right: 10%;
}
.left_half {
\t background-color: #52BAD5;
\t color: #FFFFFF;
\t font-family: "Source Sans Pro";
\t text-align: center;
\t font-weight: bold;
}
.right_half {
\t background-color: #01B2D1;
\t color: #FFFFFF;
\t font-family: "Source Sans Pro";
\t text-align: center;
\t font-weight: bold;
}
@media (max-width: 320px) {
.secondary_header {
\t margin-top: 0px;
\t margin-right: 0px;
\t margin-bottom: 0px;
\t margin-left: 0px;
\t padding-top: 1px;
\t padding-bottom: 40px;
}
.columns {
\t width: 100%;
\t margin-top: 0px;
\t margin-right: 0px;
\t margin-bottom: 0px;
\t margin-left: 0px;
\t padding-top: 0PX;
\t padding-right: 0PX;
\t padding-bottom: 0PX;
\t padding-left: 0PX;
}
.column_40.left_half {
\t width: 100%;
}
.column_60.right_half {
\t width: 100%;
}
}
@media (min-width: 321px) and (max-width: 768px) {
.columns {
\t width: 100%;
\t margin-top: 6px;
\t margin-right: 0px;
\t margin-bottom: 6px;
\t margin-left: 0px;
\t padding-top: 0px;
\t padding-right: 0px;
\t padding-bottom: 0px;
\t padding-left: 0px;
}
.column_40.left_half {
\t width: 100%;
}
.column_60.right_half {
\t width: 100%;
}
}
@media (min-width: 769px) and (max-width: 1000px) {
.columns {
\t width: 50%;
\t float: left;
\t padding-left: 0px;
\t padding-top: 0px;
\t padding-right: 0px;
\t padding-bottom: 0px;
}
.container .columns p {
\t padding-left: 25px;
\t padding-right: 25px;
}
}
.taskPreviewWrap{
\t list-style:none;
\t margin-left:-40px;
\t margin-top:-5px;
\t color:#194e8d;
\t }
.taskPreviewWrap li {
\t height:auto;
\t width:auto;
\t background:white;
\t border-radius:6px;
\t background-color:#011222;
\t padding-top:9px;
\t margin-top:5px;
\t }
.dragdotsicon{
\t width:7px;
\t height:20px;
\t background: url(http://s32.postimg.org/qlhqncer9/dragdots.png);
\t margin-left:14px;
\t margin-top:9px;
\t }
.t-Date {
\t font-weight:normal;
\t font-size:9pt;
\t font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
\t display:inline-block;
\t vertical-align: top;
\t position:relative;
\t margin-top:-17px;
\t margin-left:-197px;
\t letter-spacing:-0.4px;
\t }
.t-Date:after {
\t content:"";
\t width:1px;
\t height:29px;
\t background-color:#194e8d;
\t display: inline-block;
\t position:absolute;
\t margin-top:-8px;
\t margin-left:12px;
\t }
.t-ShortDesc{
font-weight:bold;
\t font-size:9pt;
\t letter-spacing:-0.2px;
\t font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
\t display:inline-block;
\t vertical-align: top;
\t position:absolute;
\t 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 */
\t margin-left:24px;
\t margin-top:-17px;
\t }<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>
Danke Michael! Hat super funktioniert. Schätzen Sie Ihre Zeit! – Patrick