Aligning Switch, Shape and Text

Question

I am trying to align this Switch, shape and Text like in this picture. But i am new to HTML and couldn't align them. Can you please tell me what to change here? I want to make the changes in CSS file. I tried vertical-align, justify-content, align-items. Still no luck.

This is how it should be:

Here is my HTML code:

<div>

<p style="line-height: 10px;">OpTon</p>
<p-dropdown editable="true"></p-dropdown>
</div>

<div>
    <div class="filterColumnItems">
        <p-inputSwitch [(ngModel)]="checked1"></p-inputSwitch> 
        <div style="height: 10px;width: 10px; background-color: #dd0c29; border-radius: 50%; display: table-cell;"></div>
        <p>Tor Ton</p>
    </div>
</div>

<div>
    <div class="filterColumnItems">
        <p-inputSwitch [(ngModel)]="checked2"></p-inputSwitch> 
        <div style="height: 10px;width: 10px; background-color: #e8bf29; border-radius: 7px"></div>
        <p>Tor Ton Ton</p>
    </div>
</div>

<div>
    <div class="filterColumnItems">
        <p-inputSwitch [(ngModel)]="checked3"></p-inputSwitch> 
        <div style="height: 10px;width: 10px; background-color: #30ab5b; border-radius: 7px"></div>
        <p>Tor Ton Ton Ton</p>
    </div>
</div>

<div>
    <div class="filterColumnItems">
        <p-inputSwitch [(ngModel)]="checked4"></p-inputSwitch> 
        <div style="height: 10px;width: 10px; background-color: #30ab5b; border-radius: 7px"></div>
        <p>Tor Ton Ton Ton Ton</p>
    </div>
</div>

Here is my CSS:

.filterColumnSection {
    padding: 20px;
    background-color: white;
    margin: 20px;
    margin-bottom: 0;
    border-radius: 3px;
    height: 607px;
    width: 282px;
    font-size: 14px;
    line-height: 40px;

    

    
    
}
.filterColumnItems {

  display: flex;
  justify-content: space-around;
align-items: center;






  }

:host ::ng-deep .p-dropdown {
    width: 238px;

  }

score 1 · Accepted Answer · answered Nov 26 '20 at 15:44

You were not far from what you want. If you remove justify-content property from your filterColumnItems class and add a margin to your bullets, it should be ok.

.filterColumnItems {
  display: flex;
  align-items: center;
}

.bullet {
  height: 10px;
  width: 10px;
  margin: 10px;
  border-radius: 50%;
}

See my demo

Aligning Switch, Shape and Text

1 Answers1