Stack elements under each other inside ion-item

Issue

I am trying to stack items vertically under each other inside an ion-item:

<ion-item>    
  <ion-item-divider style="width: 100%;" item-content>
    <h4>Questions</h4>
  </ion-item-divider>
  <ion-item item-content style="width: 100%;" class="no-border">
    <label style="width: 100%;" item-content>This is a label</label>
  </ion-item>
  <ion-toolbar style="width: 100%;" item-content class="transparent-toolbar" text-center>
    <button ion-button icon-only type="button">
      <ion-icon name="add"></ion-icon>
    </button>
    <button ion-button icon-only type="button" >
      <ion-icon name="trash"></ion-icon>
    </button>
  </ion-toolbar>
</ion-item>

However it is not working and the output looks like this:

This is a STACKBLITZ that shows the problem.

Solution

Use <ion-list> for this.

Demo on Stackblitz

<ion-list>
    <ion-item-divider style="width: 100%;" item-content>
        <h4>Questions</h4>
    </ion-item-divider>
    <ion-item item-content style="width: 100%;" class="no-border">
        <label style="width: 100%;" item-content>This is a label</label>
    </ion-item>
    <ion-toolbar style="width: 100%;" item-content class="transparent-toolbar" text-center>
        <button ion-button icon-only type="button">
            <ion-icon name="add"></ion-icon>
        </button>

        <button ion-button icon-only type="button">
            <ion-icon name="trash"></ion-icon>
        </button>
    </ion-toolbar>
</ion-list>

Answered By - Krishna Rathore