Keep icon bar floated right and wrap text around
<p>I have a little header bar in html/css where there are a couple icons floated to the right side. I want them to remain in position and have the title (on the left) just wrap below if the area gets too small on the right side. Right now, my html looks like so (using bootstrap) :</p>

<pre><code> &lt;div class="activity-panel-item--header"&gt;
     &lt;div class="col-sm-8"&gt;&lt;p&gt;02 Development, LLC v. 607 South Park, LLC &lt;/p&gt;&lt;/div&gt;
     &lt;div class="col-sm-4"&gt;&lt;span class="icon icon-trash-o pull-right"&gt;&lt;/span&gt;&lt;span class="icon icon-cog2 pull-right"&gt;&lt;/span&gt;&lt;span class="icon icon-pencil3 pull-right"&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So I have a col-sm-8 and col-sm-4. This will not work in the long run because col-sm-4 is too small in certain sizes, so I need to make the right column with the icon have a set width (140px lets say). So if a set a min-width on the right side it's going break on smaller sizes.</p>

<p>What I am wondering if, is there a way to let that title on the left side in the col-sm-8 move around the set width buttons on the right side when responsive (i basically want the buttons to stay in the same place the whole time). Something like if the buttons on the right were absolutely position but <em>not</em> out of the flow so the text reacts to it.</p>

<p>Here is a fiddle I was fooling with <a href="https://jsfiddle.net/DTcHh/24085/" rel="nofollow">https://jsfiddle.net/DTcHh/24085/</a></p>

<p><strong>EDIT</strong> </p>

<p>So I improvised a solution by doing the following :
- taking the right icon-bar element out of the dom flow by absolutely positioning it and giving it a set with
- adding the same width as padding to the element wrapping both the left and the right items</p>

<p>I could then just do away with the col's all together. The code looks like so :</p>

<p>HTML:</p>

<pre><code>  &lt;div class="activity-panel-item col-md-12"&gt;
    &lt;div class="activity-panel-item--header"&gt;

      &lt;p&gt;02 Development, LLC v. 607 South Park, LLC &lt;/p&gt;
      &lt;div class="activity-panel-item--header--iconbar"&gt;
        &lt;span class="icon icon-trash-o pull-right"&gt;1&lt;/span&gt;&lt;span class="icon icon-cog2 pull-right"&gt;2&lt;/span&gt;&lt;span class="icon icon-pencil3 pull-right"&gt;3&lt;/span&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="activity-panel-item--body"&gt;
      &lt;p&gt;test 123345.&lt;/p&gt;
      &lt;h3&gt;&lt;/h3&gt;
      &lt;p&gt;cases&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>CSS: </p>

<pre><code>.activity-panel-item {
  height: 100%;
  padding: 0;
}

.activity-panel-item--header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 12px 125px 12px 12px;
  min-height: 50px;
  background-color: rgba(0, 0, 0, 0.8);
}

.activity-panel-item--header p {
  color: #fff;
}

.activity-panel-item--header .icon {
  cursor: pointer;
  color: #fff;
  margin: 0px 12px;
  font-size: 20px;
}

.activity-panel-item--body {
  overflow-y: auto;
  padding: 10px 20px;
  display: block;
  width: 100%;
  height: 100%
}

.activity-title-input {
  width: 100%;
}

.activity-panel-item--header--iconbar {
  display: block;
  float: right;
  top: 10px;
  right: 10px;
  width: 125px;
  min-height: 50px;
  height: auto;
  position: absolute;
}
</code></pre>

<p>See working fiddle: <a href="https://jsfiddle.net/DTcHh/24114/" rel="nofollow">https://jsfiddle.net/DTcHh/24114/</a> </p>

<p>Any and all input would be helpful, or if anyone has a different working approach that would be great also. Thanks!</p>