Help icons float to right

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<div class="ui segments piled">
<div class="ui segment">
<form class="ui transparent icon input fluid">
<i class="icon edit"></i>
<input type="text" name="text" placeholder="Add List">
</form>
</div>
<div class="ui segment listitem block">
<span class="text"> Text</span>
<span class="others">
<span class="editList">
  <i class="ui edit icon"></i>
</span>
<span>
<i class="right icon delete ui red"></i>
  
</span>
 <span class="toggle-list-private">
    <i class="ui lock icon"></i>
 </span>
 <span class="ui teal label"></span>
</span> 
</div>

<div class="ui segment listitem block">
<span class="text"> Text</span>
<span class="others">
<span class="editList">
  <i class="ui edit icon"></i>
</span>
<span>
<i class="right icon delete ui red"></i>
  
</span>
 <span class="toggle-list-private">
    <i class="ui lock icon"></i>
 </span>
 <span class="ui teal label"></span>
</span> 
</div>
<div class="ui segment listitem block">
<span class="text"> Text 0 - 600x - File Icons can represent elements of a computer and its file system 0 - 600x - File Icons can represent elements of a computer and its file system</span>
<span class="others">
<span class="editList">
  <i class="ui edit icon"></i>
</span>
<span>
<i class="right icon delete ui red"></i>
  
</span>
 <span class="toggle-list-private">
    <i class="ui lock icon"></i>
 </span>
 <span class="ui teal label"></span>
</span> 
</div>
</div>

CSS

.text {
  float: left;
}

.others { 
  float: right;
}

.block:after {
  content: ":"
}