Align span right inside div

Question

I’m doubtful how to align a text within span as an example:

This is my HTML

I need to leave it like this, left text aligned on the right and left text aligned on the right, as an example:

HTML:

<div className="viewInstrument-output">
    <div className="outputs">
        <div>
            <span className="viewInstrument-output-title viewInstrument-font">PROG. DEGELOS</span>
        </div>
        <div>
            <label className="viewInstrument-output-status-activated viewInstrument-output-status">Ativo</label>
        </div>
    </div>
    <div className="outputs">
        <div>
            <span className="viewInstrument-output-title viewInstrument-font">SAÍDAS</span>
        </div>
        <div>
            <label className="viewInstrument-output-status-activated viewInstrument-output-status">Refrigeração</label>
            <label className="viewInstrument-output-status-activated viewInstrument-output-status">Defrost</label>
            <label className="viewInstrument-output-status-deactivated viewInstrument-output-status">Fans</label>
        </div>
    </div>
    <div className="outputs">
        <div>
            <span className="viewInstrument-output-title viewInstrument-font">TEMP. DE CONTROLE</span>
         </div>
        <div>
            <label>-5.0<sup>°c</sup></label>
        </div>
    </div>
    <div className="outputs">
        <div>
            <span className="viewInstrument-output-title viewInstrument-font">DIFERENCIAL</span>
        </div>
        <div>
            <label>3.0<sup>°c</sup></label>
        </div>
    </div>
</div>

Answer 1

It is possible using display: table, and defining rows and columns to be tabulated, and then aligning the texts of each column.

Example

#tabela {
  display: table;
  background-color: gray;
  color: #fff;
}

.linha {
  display: table-row;
}

.coluna1 {
  display: table-cell;
  padding-right: 40px;
  padding-bottom: 10px;
  text-align: right;
}

.coluna2 {
  display: table-cell;
  padding-bottom: 10px;
  text-align: left;
  border: 1px solid #000;
  border-radius: 20px;
  border-color: #fff;
  background-color: #ccc;
  color: #fff;
  font-weight: bold;
}

<div id="tabela">
  <div class="linha">
    <div class="coluna1">Prog. Degelos</div>
    <div class="coluna2">Ativo</div>
  </div>
  <div class="linha">
    <div class="coluna1">Saídas</div>
    <div class="coluna2">Refrigeração - Defrost</div>
  </div>
  <div class="linha">
    <div class="coluna1">Temp. de controle</div>
    <div class="coluna2"> -5.0</div>
  </div>
</div>

Answer 2

One way to do it would be by reorganizing your HTML in this way:

body {
  background: #333;
  color: #fff;
  font-family: sans-serif;
}

#labels {
  text-transform: uppercase;
  text-align: right;
  margin-right: 20px;
}

button {
  text-transform: uppercase;
  margin: 0 5px;
  border: none;
  background: #075E56;
  padding: 0 10px;
  border-radius: 10px;
  color: #fff;
}

.data {
  float: left;
}

.data p {
  line-height: 1rem;
  min-height: 21px;
}

<div id="labels" class="data">
  <p>Prog. Degelos</p>
  <p>Saídas</p>
  <p>Temp. de Controle</p>
  <p>Diferencial</p>
</div>

<div id="button" class="data">
  <p><button>Ativo</button></p>
  <p><button>Refrigeração</button><button>Defrost</button><button>Fans</button></p>
  <p>-5.0ºC</p>
  <p>3.0ºC</p>
</div>

Answer 3

the first thing you need to do is set a width for the div with the titles and for the with the tags. Then you can use the text-align css.

heml, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: DarkSlateGray;
}

.linha:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

.linha .celula {
  float: left;
  height: 40px;
  line-height: 40px;
}

.conteudo {
  width: calc(100% - 150px);
}

.titulo {  
  width: 150px;  
  text-align: right;  
  font-size: 12px;
}

.info {
  font-size: 25px;
  line-height: 30px;
}

.info, .titulo {
  box-sizing: border-box;
  font-weight: bold;
  padding: 0px 5px;
  color: white;
}

.tag {
  box-sizing: border-box;
  height: 28px;
  width: 100px;
  margin: 6px 5px;
  padding: 5px;
  line-height: 20px;
  float: left;
  border: 1px solid white;
  border-radius: 10px;
  background-color: teal;
  color: white;
  text-align: center;
}

<div>
    <div class="linha">
        <div class="celula titulo">
            <span>PROG. DEGELOS</span>
        </div>
        <div class="celula conteudo">
            <div class="tag">Ativo</div>
        </div>
    </div>
    <div class="linha">
        <div class="celula titulo">
            <span>SAÍDAS</span>
        </div>
        <div class="celula conteudo">
            <div class="tag">Refrigeração</div>
            <div class="tag">Defrost</div>
            <div class="tag">Fans</div>
        </div>
    </div>
    <div class="linha">
        <div class="celula titulo">
            <span>TEMP. DE CONTROLE</span>
        </div>
        <div class="celula conteudo">
            <div class="info">-5.0<sup>°c</sup></div>
        </div>
    </div>
    <div class="linha">
        <div class="celula titulo">
            <span>DIFERENCIAL</span>
        </div>
        <div class="celula conteudo">
            <div class="info">3.0<sup>°c</sup></div>
        </div>
    </div>
</div>