Html 根据条件在两列上显示数据

我正在处理一个角度应用程序。我想在两列上显示数据，但我想根据条件决定将行放在哪一列上

<div class="row" *ngFor="let content of Content"> 
    <div class="col-md-6" *ngIf="content.group==='Date'">
        <div>{{content.title}}</div>
    </div>
</div>

{{content.title}

---

例如，数据分为两组：文本和日期。我想将文本组中的所有数据置于左列，将日期组中的所有数据置于右列。

请进行一些更改，以便获得准确的输出：

<div class="row"> 
    <div class="col-md-6">
        <div class="row" *ngFor="let content of Content">
          <div class="col-md-12" *ngIf="content.group==='Date'">{{content.title}}</div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row" *ngFor="let content of Content">
         <div class="col-md-12" *ngIf="content.group==='Text'">{{content.title}}</div>
        </div>
    </div>
</div>

{{content.title}
{{content.title}

---

我希望这会有所帮助。

您需要对齐他们所在组的数据吗？是的，我希望一个组中的所有数据都在左侧，其余的在右侧column@AdelaM编写要对齐的CSS列。请提供预期输出视图的示例。