title: How Do I Wrap Text So My Accordions Image Does Go OutSide My aAccordion
body: <p>I have a page on my website which has many accordions on it.  My accordions also have a an image on so a user knows they can expand/collapse it.</p>
  
  <p>This is done via CSS as shown below:</p>
  
  <pre><code>.panel-heading .accordion-toggle:after 
  {
      font-family: 'Glyphicons Halflings';
      content: "\e113";
      float: right;
  }
  .panel-heading .accordion-toggle.collapsed:after {
      content: "\e114";
  }
  </code></pre>
  
  <p>One of my accordions are set up as follows:</p>
  
  <pre><code>&lt;div id="accordion" class="panel-group"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;
                  &lt;a class="accordion-toggle collapsed" href="#collapseOne" data-parent="#accordion" data-toggle="collapse"&gt;How do I set up the regular investment service for my clients?&lt;/a&gt;
              &lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id="collapseOne" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;p&gt;Content here.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>But the problem I have is that when the text gets to the end it pushes my image out of the grey box as show below</p>
  
  <p><img src="https://i.stack.imgur.com/pcJMD.png" alt="Long heading pushes image out"></p>
  
  <p>What I want is for it to look exactly how it does when the heading is not to long or for the image to be vertically aligned top or middle but <strong>NOT</strong> bottom</p>
  
  <p><img src="https://i.stack.imgur.com/L8dJE.png" alt="Normal heading with image"></p>
  
  <p>I am using HTML5 MVC4 with bootstrap and I would like to do this without the need for JAVA/Jquery as I was able to get the image to flick from expand to collapse just using the CSS above.</p>
  
  <p>Thanks
  Antony</p>