Placing HTML input and button horizontally

Question

I'm having some issues doing something fairly basic (I think). I would like to place the Save and Copy button on the same line and have them centered horizontally in the following CodePen:

https://codepen.io/anon/pen/XYLmwb?editors=1100

HTML:

<div class="wrapper">
 <form>
  <textarea id="notes"></textarea>
  <input id="save" type="submit" value="Save" />
 </form>
 <button id="copy-btn">Copy</button>
</div>

CSS:

#notes {

}

#save {

}

#copy-btn {

}

.wrapper {
 text-align: center;
}

It's important that the HTML structure remains the same and that this is accomplished using CSS. Does anyone have a suggestion?

Answer 1

#notes {
    float: left;
}

#save {
    float: left;
    margin: 7px 0px 0px 5px;
}

#copy-btn {
    position: absolute;
    margin: 7px 0px 0px 5px;
}

.wrapper {
  text-align: center;
}
.wrapper form{
    display: inline-block;
}
.wrapper button{
    display: inline-block;
}

Just don't forget to clear float. clear: both;