Float two flex items left and one right in one row - html

Question

I am trying to use flexbox to design my layout. Basically my goal is: move the button "I am a button" all the way to the right end of the flex container, and keep the other two social buttons at the left side of the container.
<div class="quote-box quote">
<h2>This is where the quote text is going to beThis is where the quote text is going to beThis is where the quote text is going to be</h2>
<p class="quote-writter">Quote writer</p>
<div class="buttons">
<span class="my-button">I am a button</span>
<a href="#" class="tweet-quote-butt"><i class="fa fa-2x fa-twitter"></i>
<a href="#" class="tumblr-quote-butt"><i class="fa fa-2x fa-tumblr"></i>
</a>
</div>
</div>
</div>
Here is the CSS
.wrapper {
max-width:750px;
margin: 0 auto;
display:flex;
align-items:center;
order:1;
}
.quote-box {
background:rgba(255,255,255,0.2);
margin:20px;
padding:20px;
border-radius: 4px;
text-align: center;
flex:1;
display:flex;
flex-wrap:wrap;
}
.quote-box .quote-writter{
display: flex;
justify-content: flex-end;
}
.quote-box .buttons{
display: flex;
justify-content: flex-start;
}
.quote-box > * {
flex:1 1 100%;
}
.quote-box .my-button{
display: flex;
justify-content: flex-end;
width: 100vh;
order:3;
}
.quote-box .my-button .get-quote-butt{
display: flex;
flex-basis: 300px;
align-items: center;
}
PLEASE LOOK AT THIS IMAGE

Answer 1

You can use margin-left:auto, and then adjust your button.
.wrapper {
max-width: 750px;
margin: 0 auto;
display: flex;
align-items: center;
order: 1;
}
.quote-box {
background: rgba(255, 255, 255, 0.2);
margin: 20px;
padding: 20px;
border-radius: 4px;
text-align: center;
flex: 1;
display: flex;
flex-wrap: wrap;
}
.quote-box .quote-writter {
display: flex;
justify-content: flex-end;
}
.quote-box .buttons {
display: flex;
justify-content: flex-start;
}
.quote-box>* {
flex: 1 1 100%;
}
.quote-box .my-button {
display: flex;
justify-content: flex-end;
width: 100vh;
order: 3;
margin-left: auto;
}
.quote-box .my-button .get-quote-butt {
display: flex;
flex-basis: 300px;
align-items: center;
background: #f1f1f1;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="quote-box quote">
<h2>This is where the quote text is going to beThis is where the quote text is going to beThis is where the quote text is going to be</h2>
<p class="quote-writter">Quote writer</p>
<div class="buttons">
<span class="my-button">I am a button</span>
<i class="fa fa-2x fa-twitter"></i>
<a href="#" class="tumblr-quote-butt"><i class="fa fa-2x fa-tumblr"></i>
</a>
</div>
</div>
DEMO HERE