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

Question

Как создать текстовую область, например, под желтой областью:

Существует несколько требований:

1. используйте * ngFor для отображения массива строк zoneList.

2. Цвет фона

3. Горизонтальное отображение

4. Возврат новой строки, когда предыдущая строка достигла максимальной длины.

5. с возможностью прокрутки.

Так что это приложение angular , Мой текущий HTML такой:

<form class="form-horizontal" [formGroup]="zoneSelectionForm" (ngSubmit)="onSubmit()">

<div class="bgDarkerGray">
    <div class="form-group row ">
        <label for="inputZoneName" id = "selectionLabel" class="col-6 ">Zone:</label>
        <div class="col-6">
            <input type="text" formControlName="inputZone" class="form-control"
             autofocus="autofocus" required>
        </div>
    </div>
</div>

<div class="pre-scrollable bgYellow">
    <ul class="list-group list-group-horizontal" *ngFor="let zone of zoneList">
        <li class="list-group-item list-group-item-action bgYellow">
          {{zone}}
        </li>
    </ul>
</div>

Я предпочитаю использовать bootstrap, поэтому я попробовал .list-group-Horizontal. Но я понимаю, что если я использую * ngFor, он не будет горизонтальным.

Это какой-то способ сделать выше точно UI, используя bootstrap?