Проблема выравнивания в угловом компоненте (проблема CSS)

Question

У меня нет опыта в JS и Angular. И я учусь этому прямо сейчас. Я перепробовал много разных вариантов, но я не нашел хорошего решения. Мне нужно, чтобы компонент флажка был всегда выровнен по левой стороне и чтобы он был виден независимо от размера текста. Это работает, когда я использую style = "width: 300px", но похоже на жестко закодированное решение.

    <div class="col-md-5">
    <div class="panel panel-default">
        <div class="panel-heading">Available Permissions</div>
        <div class="panel-body no-padding">
            <md-content style="height: 400px;">
                <section>
                    <div class="md-primary md-subheader" style="position: sticky; top: 0; z-index: 2;">
                        <div class="md-subheader-inner">
                            <div class="md-subheader-content">
                                <md-input-container class="md-block">
                                    <label for="availableSearchTerm">Search</label>

                                    <input type="text"
                                               name="availableSearchTerm"
                                               id="availableSearchTerm"
                                               data-ng-model="availableSearchTerm"
                                               data-ng-change="searchPermissions(availableSearchTerm, availablePermissions)"/>
                                </md-input-container>
                            </div>
                        </div>
                    </div>
                    <md-list class="no-padding" role="list">
                        <md-list-item class="md-3-line md-no-proxy" role="listitem" data-ng-repeat="permission in searchPermissions(availableSearchTerm, availablePermissions)">
                            <md-checkbox aria-label="Permission Chekbox" type="checkbox" role="checkbox" tabindex="0" data-ng-click="selectPermission(permission)"/>
                            <div class="md-list-item-text">
                                <h3>{{permission.name}}</h3>
                                <h4>{{permission.description}}</h4>
                            </div>
                        </md-list-item>
                    </md-list>
                </section>
            </md-content>
        </div>
    </div>
</div>

<div class="col-md-2 text-center" style="padding-top: 180px;">
    <button type="button" data-ng-click="assignPermissions()" class="md-raised btn-w-xs md-default md-button md-ink-ripple" uib-tooltip="Assign Permissions" tooltip-append-to-body="true">
        <i class="fa fa-arrow-right"/>
    </button>
    <button type="button" data-ng-click="removePermissions()" class="md-raised btn-w-xs md-default md-button md-ink-ripple" uib-tooltip="Remove Permissions" tooltip-append-to-body="true" style="margin-top: 10px;">
        <i class="fa fa-arrow-left"/>
    </button>
</div>

<div class="col-md-5">
    <div class="panel panel-default">
        <div class="panel-heading">Assigned Permissions</div>
        <div class="panel-body no-padding">
            <md-content style="height: 400px;">
                <section>
                    <div class="md-primary md-subheader" style="position: sticky; top: 0; z-index: 2;">
                        <div class="md-subheader-inner">
                            <div class="md-subheader-content">
                                <md-input-container class="md-block">
                                    <label for="assignedSearchTerm">Search</label>

                                    <input type="text"
                                           name="assignedSearchTerm"
                                           id="assignedSearchTerm"
                                           data-ng-model="assignedSearchTerm"
                                           data-ng-change="searchPermissions(assignedSearchTerm, user.permissions)" />
                                </md-input-container>
                            </div>
                        </div>
                    </div>
                    <md-list class="no-padding" role="list">
                        <md-list-item class="md-3-line md-no-proxy" role="listitem" data-ng-repeat="permission in searchPermissions(assignedSearchTerm, user.permissions)">
                            <md-checkbox aria-label="Permission Chekbox" type="checkbox" role="checkbox" tabindex="0" data-ng-click="selectPermission(permission)"/>
                            <div class="md-list-item-text">
                                <h3>{{permission.name}}</h3>
                                <h4>{{permission.description}}</h4>
                            </div>
                        </md-list-item>
                    </md-list>
                </section>
            </md-content>
        </div>
    </div>
</div>

Answer 1

Это обернет длинные тексты.

  .md-list-item-text h3,
  .md-list-item-text h4{
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
  }