Совместите PrimeNG-компоненты рядом друг с другом, а не под друг другом

Question

Я использую PrimeNG-компоненты pInputText и p-dropdown, которые я бы хотел выровнять рядом друг с другом.У меня есть следующий код:

<div class="main-div">
  <div class="block-div">
  <h4 class="input-description">Enter Information:</h4>
  <span class="ui-float-label">
    <input id="psp-input" type="text" pInputText [(ngModel)]="pspNumber"/>
    <label for="psp-input">{{projectNumber}}.{{pspNumber}}</label>
  </span>
  <h4 class="input-description">Select Type:</h4>
  <p-dropdown [options]="orderTypes" [(ngModel)]="selectedOrderType" [optionLabel]="Typ"></p-dropdown>
  </div>
</div>

, который производит (смущает меня) следующий вывод:

Какможно ли их выровнять рядом друг с другом?Я хотел выровнять их в inline-block в моем div:

.block-div {
    display: inline-block;
}

, который работал для нативных элементов Angular, но не для них.Я также попытался изменить width или совместить их с двумя различными div и расположить их рядом друг с другом, что также не сработало.Как я могу сделать это для PrimeNG-Components?

Answer 1

Попробуйте сгруппировать по таблицам и тегам tr и td аналогичную проблему в тегах p-calendar в браузере Edge.

Answer 2

Попробуйте сгруппировать каждую часть (компонент и его заголовок) в простой тег div:

  <div class="block-div">

    <div>

     <h4 class="input-description">Enter Information:</h4>
     <span class="ui-float-label">
      <input id="psp-input" type="text" pInputText [(ngModel)]="pspNumber"/>
      <label for="psp-input"></label>
     </span>

    </div>

    <div>

      <h4 class="input-description">Select Type:</h4>
      <p-dropdown [options]="orderTypes" [(ngModel)]="selectedOrderType" optionLabel="Typ"></p-dropdown>

    </div>

  </div>

Затем измените css на:

 .block-div {
   display: inline-flex;
 }

Рабочая демонстрация.