Why can't I get two <p> elements to be side-by-side and aligned by center?

Here is a blue print of what I am trying to do:

As you can see, I want to move the two texts to the center of there input box.

HTML:

<p id="win">On win:</p>
<p id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>

I tried to do this with no luck:

<p style="text-align: center;" id="win">On win:</p>
<p style="text-align: center;float: left;" id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>

result

CSS for input:

input[class="default"] {
    width: 30%;
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    border: 1px solid #555;
    text-align: center;
    background-color: white;
    display: inline-block;
}

How can I do this properly?



Using floats and text-align you can achieve it:

body {text-align: center;}
#win, #lose {width: 50%; float: left; text-align: center;}
#lose {float: right;}
.default {display: inline-block; width: 45%; padding: 3px;}
<p id="win">On win:</p>
<p id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>

Preview

Give both p elements the float: left; style.

You have to set a block with the input and the title.

body
{
  text-align:center;
}

input[class="default"] {
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    border: 1px solid #555;
    text-align: center;
    background-color: white;
    display: inline-block;
}

#lose,#win
{
  display:inline-block;
  text-align:center;
  width: 30%;
}
<body>
<div  id="win">
  <p>On win:</p>
  <input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
</div>

<div id="lose">
  <p>On lose:</p>
  <input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>
</div>
</body>

I would use a flexbox for a div around the paragraphs and the inputs.

.row {
  display: flex;
  justify-content: space-around;
  width: 50%;
}

input[class="default"] {
  width: 30%;
  padding: 12px 20px;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid #555;
  text-align: center;
  background-color: white;
  display: inline-block;
}
<div class="row">
  <p id="win">On win:</p>
  <p id="lose">On lose:</p>
</div>
<div class="row">
  <input class="default" id="onwin" placeholder="%" value="0" autocomplete="off" />
  <input class="default" id="onlose" placeholder="%" value="0" autocomplete="off" />
</div>

The best approach for me is to use flex along with containers : it will not mess with your DOM (like float does eg. child elements can get bigger than their parent). So i’ll go with :