JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="quote-box collapse" id="collapse-quote">
<div class="text">
   asdasd
</div>

<div class="buttons">

    <button class="button" id="twitter-button"><a   title="Tweet this quote!" target="_blank"> tweet
      <i class="fa fa-twitter"></i>
    </a></button>

    <button class="button" id="facebook-button"><a   title="Share this quote!" target="_blank">share
      <i class="fa fa-facebook"></i>
    </a></button>

    <button class="button" id="close-open" type="button" data-toggle="collapse" data-target="#collapse-quote" aria-expanded="false" aria-controls="collapse-quote">
    <i class="fa fa-minus"></i>
  </button>
</div>
  
</div>

CSS

.quote-box {
  text-align: center;
  position: relative;
  border-radius: 4.5px;
  border: solid black 1px;
  width: 50%;
  padding: 10%;
  margin: 10% auto auto auto; /* center the box */
}
.quote-box .buttons{
  top: 0; /* align to top */
  left:0;
  width: 100%;
  position:absolute;/* out of the document flow and you can move*/
  text-align: left;
  padding: 1%;
  box-sizing: border-box;
}

/* sample: uncomment if you want to align on right 
#twitter-button{
  float: right;
} 
*/

#close-open { /* float the collapse button to the right */
  float: right; 
}
.fa-minus {
  color: #11A5D6; /* color for the button */
}