CSS два span или div в одной строке и в div

Question

Я пытаюсь добиться этого результата:

Но я не могу правильно расположить два div (или span) с числами,

Я пытался использовать два диапазона с inline-block для отображения таким образом:

HTML:

<div class="row">
    <mat-form-field class="col">
        <mat-label>{{ 'REPORTISTICA_UFFICI_QUALITA.select_report' | translate }}</mat-label>
        <mat-select (selectionChange)="onChangeSelection($event)" [(value)]="actualView">
          <mat-option *ngFor="let report of mappaReport" [value]="report.value">
            {{report.description}}
          </mat-option>
        </mat-select>
    </mat-form-field>
    <div class="col-dettagli"  *ngIf="actualView == 'cooperative' ">
      <span class="col-interventi-attivita" >
      <mat-label>Interventi</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleInterventi }}" [readonly]="true">
      </span>
      <span class="col-interventi-attivita">
              <mat-label>Attivita</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleAttivita }}" [readonly]="true">
                  </span>
    </div>
  </div>

CSS:

.col {
  width: 25%;
}

.col-dettagli{
  text-align: right;
}

.col-interventi-attivita{
  display: inline-block;
}

Но это не правильно, и я получаю это:

Затем я попытался изменить CSS на:

.col {
  width: 25%;
}

.col-dettagli{
  text-align: right;
  display: inline;
}

.col-interventi-attivita{
  display: inline-block;
}

и я получаю это:

Полный HTML:

<mat-card class="mat-card">
  <mat-card-header class="label">
    <mat-card-title>Title</mat-card-title>
  </mat-card-header>
  <form>
    <div class="row">
    <mat-form-field class="col">
        <mat-label>{{ 'REPORTISTICA_UFFICI_QUALITA.select_report' | translate }}</mat-label>
        <mat-select (selectionChange)="onChangeSelection($event)" [(value)]="actualView">
          <mat-option *ngFor="let report of mappaReport" [value]="report.value">
            {{report.description}}
          </mat-option>
        </mat-select>
    </mat-form-field>
    <div class="col-dettagli"  *ngIf="actualView == 'cooperative' ">
      <span class="col-interventi-attivita" >
      <mat-label>Interventi</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleInterventi }}" [readonly]="true">
      </span>
      <span class="col-interventi-attivita">
              <mat-label>Attività</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleAttivita }}" [readonly]="true">
                  </span>
    </div>
  </div>


  </form>
</mat-card>

Полный CSS:

.col {
  width: 25%;
}

.col-dettagli{
  text-align: right;
  display: inline;
}

.col-interventi-attivita{
  display: inline-block;
}

#textLabel {
  padding: 0px 10px;
}

.mat-card {
  max-height: 400px;
  overflow-y: auto;
}

.mat-card {
  background: none;
  box-shadow: none;
  max-height: none;
}

.mat-form-field {
  padding: 15px
}

.mat-card form {
  background: #ffffff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.mat-card-header .mat-card-title {
  font-size: 14px;
  font-weight: 900;
  line-height: 19px;
  position: relative;
  padding: 3px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 0px;
}

.mat-card-header {
  position: relative;
  background: #f4f4f4;
  border-radius: 12px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.mat-card-header:before {
  position: absolute;
  content: "";
  background: $red;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  top: 6px;
  left: 6px;
}

ОБНОВЛЕНИЕ

Ответ liamgbs правильный, но мне пришлось немного его изменить, потому что я не мог изменить код для основного контейнера.Итак, теперь:

HTML:

<div class="col-dettagli"  *ngIf="actualView == 'cooperative' ">
      <div>
      <mat-label>Interventi</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleInterventi }}" [readonly]="true">
      </div>
      <div>
              <mat-label>Attività</mat-label>
          <input matInput type="text"
                  placeholder="{{ totaleAttivita }}" [readonly]="true">
      </div>
    </div>

CSS:

.col-dettagli{
  display: inline-flex;
  justify-content: space-between;
  width: 130px;
  float: right; 
}

Answer 1

Взгляните на CSS Flexbox, это жизненно важный навык CSS, используемый для адаптивного позиционирования, и, скорее всего, он вам нужен.

Проверьте следующий код и попытайтесь адаптировать его к вашему приложению:

    .outer {
        display: flex;
        justify-content: space-between;
    }

    .inner-left {
        border: solid black 1px;
        width: 300px;
    }
    .inner-right {
        display: flex;
        justify-content: space-between;
        width: 100px;
        border: solid black 1px;

    }

<div class="outer">
    <div class="inner-left">
        A
    </div>

    <div class="inner-right">

        <div>
           B
        </div>

        <div>
           C
        </div>

    </div>
</div>

Answer 2

.col-dettagli, col-interventi-attivita {
    display: flex;
}