title: Bootstrap 4 expandable card header has spacing & wrapping issues and rotating icon
body: <p>I am working on creating a bootstrap4 card with a title/body and close button that can expand and collapse. I have been following this tutorial:
  <a href="https://disjfa.github.io/bootstrap-tricks/card-collapse-tricks/" rel="nofollow noreferrer">Card collapse tricks!</a></p>
  <p>I like the example but want to do two things:</p>
  <ul>
  <li>move expand icon to left of card-header</li>
  <li>add close button to right of card-header</li>
  </ul>
  <p>In this jsfiddle I have attempted to do these two things:</p>
  <p><a href="https://jsfiddle.net/s0ygr35L/1/" rel="nofollow noreferrer">https://jsfiddle.net/s0ygr35L/1/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;/head&gt;
  
  my attempt:
  
  &lt;div class="card ml-5 mr-5 mt-5"&gt;
      &lt;h5 class="card-header expandable"&gt;
  
          &lt;!-- method2 --&gt;
          &lt;a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block"&gt;
              &lt;div class="row " style='margin-bottom:0;'&gt;
                  
                  &lt;div class="col-md-1 "&gt;
                      &lt;i class="rotate fa fa-chevron-down "&gt;&lt;/i&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="col"&gt;
                      &lt;p&gt;Collapsible Group Item #1&lt;/p&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="col"&gt;
                      &lt;i class="fa fa-close pull-right"&gt;&lt;/i&gt;
                  &lt;/div&gt;
               
              &lt;/div&gt;
          &lt;/a&gt;
           
          
      &lt;/h5&gt;
      &lt;div id="collapse-example" class="collapse show" aria-labelledby="heading-example"&gt;
          &lt;div class="card-body"&gt;
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
              officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
              wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
              Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
              excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
              you probably haven't heard of them accusamus labore sustainable VHS.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  example:
  
  
  &lt;div class="card ml-5 mr-5 mt-5"&gt;
      &lt;h5 class="card-header expandable"&gt;
          &lt;!-- method1  --&gt;
          &lt;a data-toggle="collapse" href="#collapse-example2" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block"&gt;
              &lt;i class="fa fa-chevron-down pull-right"&gt;&lt;/i&gt;
              Collapsible Group Item #1
          &lt;/a&gt;
          
          
      &lt;/h5&gt;
      &lt;div id="collapse-example2" class="collapse show" aria-labelledby="heading-example"&gt;
          &lt;div class="card-body"&gt;
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
              officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
              wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
              Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
              excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
              you probably haven't heard of them accusamus labore sustainable VHS.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The first card is my attempt, I added a col / row section for the header, but this has resulted in some unwanted blank space at the bottom?
  <a href="https://i.stack.imgur.com/bFHjR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bFHjR.png" alt="enter image description here" /></a></p>
  <p>I tried setting the style to have padding-bottom=0 and margin-bottom=0 but it didn't fix it.
  The close button on the right of the card-title is also rotating whenever the card is expanded/collapsed, because of the css code. I tried making the css identifier more specific but it keeps rotating the icon?</p>
  <p>Can anyone help me:</p>
  <ul>
  <li>remove the blank space at the bottom of my card-title</li>
  <li>prevent my close icon button from rotating</li>
  </ul>