How can I put an element to right of a centered element? - css

Question

I have two inputs ("email" and "password") centered horizontally. Now, I want to put an item to right of them, but keeping them (email and password) centered.
<div style={{ display: "flex", justifyContent: "center" }}>
<div className="col-md-6 row">
<div className="col-md-6">
<input placeholder="email" />
</div>
<div className="col-md-6">
<input placeholder="password" />
</div>
</div>
<button text="Entrar" />
</div>
If I remove <button>, inputs are centered when I put the button all three items are centered, but I just want center email and password inputs.

Answer 1

The easiest way would just be to give the element you want on the right position: absolute (to take it out of the flow) and then use left and top to position it where you want it (noting that these values can be percentage-based). This means you may have to play around with values to get it exactly where you want it, but will keep the other element in the vertical center:
button {
position: absolute;
top: 5%;
left: 75%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style='display: flex; justify-content: center;'>
<div class="col-md-6 row" style='background-color: yellow;'>
<div class="col-md-6">
<input placeholder="email" />
</div>
<div class="col-md-6">
<input placeholder="password" />
</div>
</div>
<button>Entrar</button>
</div>

Answer 2

I would change a bit your code.
This answer asumes that you want the bellow the fields and right aligned.
Like this.
<div style={{ display: "flex", justifyContent: "center" }}>
<div className="col-md-6 row">
<div className="col-md-6">
<input placeholder="email" />
</div>
<div className="col-md-6">
<input placeholder="password" />
</div>
</div>
<div className="col-md-6 row">
<button class="pull-right" text="Entrar" />
</div>