List item with a primary action and zero or more secondary actions. All items align vertically central. This is especially useful if you want to assign a click action to the primary content, or if you want to style the secondary items differently.

index.html

<div class="item-with-actions">
    <i class="primary">
        This is the primary content of the item
    </i>
    <div>
        <button>
            Edit
        </button>
    </div>
    <div>
        <button>
            Delete
        </button>
    </div>
</div>

<div class="item-with-actions">
    <div>
        <button>
            Edit
        </button>
    </div>
    <div>
        <button>
            Delete
        </button>
    </div>
    <i class="primary">
        Secondary items before the primary content
    </i>
</div>

<div class="item-with-actions">
    <div>
        <button>
            Info
        </button>
    </div>
    <i class="primary">
        Secondary items on both sides
    </i>
    <div>
        <button>
            Edit
        </button>
    </div>
    <div>
        <button>
            Delete
        </button>
    </div>
</div>

<div class="item-with-actions">
    <i class="primary">
        No secondary items
    </i>
</div>

style.css

.item-with-actions {
    display: table;
    width: 100%;
}

.item-with-actions > * {
    display: table-cell;
    vertical-align: middle;
}

.item-with-actions > .primary {
    width: 100%;
    background: grey;
    color: white
}

.item-with-actions > .primary +:not(.primary):not(:last-child) {
    padding-left: 5px;
}

.item-with-actions >:not(.primary):not(:last-child) {
    padding-right: 5px;
}