Как вставить неправильные блоки div рядом друг с другом

Question

Я создаю динамический элемент управления угловыми вопросами, который имеет несколько элементов управления множественным выбором, разделенных на текст.

Примерно так:
[control] [text] [control] [text]

В html-коде это 4 деления, одно на другое. В TS это коллекция, которая типа

a. текст (есть только текст)
б. ответы (сборник текстов)

Каким образом я могу вставить эти элементы управления множественным выбором в текст без разрывов строк?

html

<mat-card *ngIf="question.type === 2 && question.wasFormatted" class="question" fxLayout="column" fxLayoutAlign="start start">

  <div *ngFor="let paragraph of controls" class="paragraph">
    <div *ngFor="let control of paragraph.content" class="item">
      <ng-container [ngSwitch]="control.type">

        <span *ngSwitchCase="1" [innerHtml]="control.content" class="text">
        </span>

        <mat-form-field *ngSwitchCase="2" class="selection">
          <mat-select [(value)]="answers[control.content]">
            <mat-option></mat-option>
            <mat-option *ngFor="let questionField of question.fields[control.content]"
              [value]="questionField.id">
              {{ questionField.content }}
            </mat-option>
          </mat-select>
        </mat-form-field>

      </ng-container>
    </div>
  </div>

</mat-card>

css

.selection {
  max-width: 150px;
}

.paragraph {
  display: block;
  min-height: 65px;
}

.item {
  float: left;
  margin: 0px 4px 0px 2px;
  line-height: 65px;
}

ts

import { Component, OnInit, Input, ViewChild, ViewContainerRef, ComponentRef, Compiler, Injector, NgModuleRef, NgModule, AfterViewInit } from '@angular/core';
import { FillFieldsQuestion } from 'src/app/domain/models/question-fill-fields';
import { Guid } from 'src/app/framework/structs/guid.struct';
import { QuestionService } from 'src/app/domain/services/question.service';

import { FillFieldControl, FillFieldControlTypeEnum } from './fill-field-control';

@Component({
  selector: 'app-test-solving-question-fill-fields',
  templateUrl: './test-solving-question-fill-fields.component.html',
  styleUrls: ['./test-solving-question-fill-fields.component.scss']
})
export class TestSolvingQuestionFillFieldsComponent {
  @ViewChild('questionViewChild', {read: ViewContainerRef}) questionContentViewChild: ViewContainerRef;

  public answers: Map<Guid, Guid> = new Map<Guid, Guid>();
  public controls: Array<FillFieldControl> = new Array<FillFieldControl>();

  private _question: FillFieldsQuestion;
  private _questionFillFieldsComponentRef: ComponentRef<any>;

  @Input() set question(value: FillFieldsQuestion) {
    if (value.wasFormatted) {
      return;
    }

    let questionContent = value.content;

    if (!questionContent.includes('<p>')) {
      questionContent = `<p>${questionContent}</p>`;
    }

    const paragraphs = questionContent.split('</p>');
    paragraphs.forEach(paragraph => {
      const paragraphLine = paragraph.replace('<p>', '').replace('<br>', '');
      const content = new Array<FillFieldControl>();
      const pargraphControl = new FillFieldControl(content, FillFieldControlTypeEnum.paragraph);

      this.fillParagraphControls(value, paragraphLine, content);
      this.controls.push(pargraphControl);
    });

    console.log(this.controls);

    if (!value.wasFormatted) {
      value.wasFormatted = true;
    }

    this._question = value;
  }

  private fillParagraphControls(value: FillFieldsQuestion, questionContent: string, paragrapControls: Array<FillFieldControl>) {
    // tslint:disable-next-line: forin
    for (let key in value.fields) {
      this.answers.set(key, '');
      const formattedKey = this._questionService.getFormattedId(key);
      const splitted = questionContent.split(formattedKey);
      if (splitted.length > 1) {
        if (!Guid.getGuids(splitted[0])) {
          this.addControl(paragrapControls, new FillFieldControl(splitted[0], FillFieldControlTypeEnum.string));
          this.addControl(paragrapControls, new FillFieldControl(key, FillFieldControlTypeEnum.control));
          if (!Guid.getGuids(splitted[1])) {
            this.addControl(paragrapControls, new FillFieldControl(splitted[1], FillFieldControlTypeEnum.string));
          }
        } else {
          this.addControl(paragrapControls, new FillFieldControl(key, FillFieldControlTypeEnum.control));
          this.addControl(paragrapControls, new FillFieldControl(splitted[1], FillFieldControlTypeEnum.string));
        }

        if (!Guid.getGuids(splitted[1])) {
          break;
        }

        questionContent = splitted[1];
      } else if (splitted.length === 1 && !Guid.getGuids(splitted[0])) {
        this.addControl(paragrapControls, new FillFieldControl(splitted[0], FillFieldControlTypeEnum.string));
        break;
      }
    }
    return questionContent;
  }

  private addControl(paragrapControls: Array<FillFieldControl>, control: FillFieldControl) {
    if (control.content === '<meta>') {
      return;
    }

    paragrapControls.push(control);
  }

  get question(): FillFieldsQuestion {
    return this._question;
  }

  constructor(
    private _questionService: QuestionService) {
  }
}