 <p>You have to use <strong>floating property</strong> and some <strong>width to counter part</strong>, then it will work. Why don't you use some <strong>calc()</strong> style property value/attribute there?</p> <p><a href="https://jsfiddle.net/9xr8urz1/5/" rel="nofollow"><strong>Check this fiddle here</strong></a></p> <p>HTML for example purpose</p> <pre><code>&lt;ul&gt; &lt;li class="check-label"&gt;But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born&lt;/li&gt; &lt;li class="check-counter"&gt;1&lt;/li&gt; &lt;div class="clearfix"&gt;&lt;/div&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li class="check-label"&gt;But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born&lt;/li&gt; &lt;li class="check-counter"&gt;2&lt;/li&gt; &lt;div class="clearfix"&gt;&lt;/div&gt; &lt;/ul&gt; </code></pre> <p><strong>Your CSS will be</strong></p> <pre><code>ul{ list-style:none; background:#FFFFFF; width:300px; padding:10px; margin:0px; border-bottom:solid 1px #CCCCCC; } ul li{ margin:0px; } ul li.check-label{ float:left; width:calc(100% - 50px); } ul li.check-counter{ width:50px; float:left; text-align:center; color:red } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } </code></pre>