How can I align the text right and right?

Question

I am trying to align large text on either side of the center of the page. For instance:

Current Recommendation: Open
        Current Status: Closed

But imagine that the text is centered and larger.

The only way I have been able to do this so far is through a table, but I know that this is not a modern approach to web layouts. Here's jsfiddle: https://jsfiddle.net/nyLLzy1m/3/

Is there a way to do this in HTML and CSS without a table? I tried spaces with a float left and right, but then the text floats all the way to the right or left, and not to the right or left of the center.

p {
    margin: 0;
}

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
  <tbody>
    <tr>
      <td align="right" width="50%" style="padding-right: 5px;">
        <p style="font-size: 20px;">Current Recommendation:</p>
      </td>
      <td align="left" width="50%" style="padding-left: 5px;">
        <p style="font-size: 20px;">Open</p>
      </td>
    </tr>
    <tr>
      <td align="right" width="50%" style="padding-right: 5px;">
        <p style="font-size: 20px;">Current Status:</p>
      </td>
      <td align="left" width="50%" style="padding-left: 5px;">
        <p style="font-size: 20px;">Closed</p>
      </td>
    </tr>
  </tbody>
</table>

Run codeHide result

Answer 1

You can float divs with 50% width.

<div style="width:50%; float:left; text-align:right;">Current Recommendation:</div>
<div style="width:50%; float:left;">Open</div>
<div style="width:50%; float:left; text-align:right;">Current Status:</div>
<div style="width:50%; float:left;">Closed</div>

Run codeHide result

Answer 2

display: flex;:

.centered {
  display: flex;
}

.centered .left {
  text-align: right;
  width: 50%;
}

.centered .right {
  text-align: left;
  width: 50%;
  padding: 0 0 0 10px;
  box-sizing: border-box;
}

<div class="centered">
  <div class="left">
    Current Recommendation:
  </div>
  <div class="right">
    Open
  </div>
</div>
<div class="centered">
  <div class="left">
    Current Status:
  </div>
  <div class="right">
    Closed
  </div>
</div>

Hide result

Answer 3

display:flex;, . .

See updated jsfiddle

The code:

.main {
  width: 100%;
}

.first,
.second {
  width: 50%;
  float:left;
}

.first > p {
  text-align: right;
}

.second > p {
  text-align: left;
}

  
    <div class="main">
      <div class="first">
      <p>
      Current Recommendation: <br>
      Current Status: 
      </p>
      </div>
      <div class="second">
      <p>
      Open <br>
      Closed
      </p>
      </div>
    </div>

Run codeHide result

Hope this helps!

Answer 4

Basically, this is a label and the logic of values ​​... The way to achieve this is to add width to the label and correctly align the text inside it, and the value can be spaced with the text aligned to the left. Both swim on the left.

The situation is similar with tables, but you use label / span or dt dl dd, what ever ... the same logic applies