HTML - Как включить отступ / поля родительского элемента в процентах ширины текущего элемента?

Question

Я отображаю иерархическую структуру своей организации, которая имеет два столбца: Имя и Люди.Поскольку каждый элемент иерархии может принадлежать разному уровню иерархии, я использую свойство margin-left css, чтобы различать их.Но когда я устанавливаю ширину Name div на 80%, а ширину People div на 20%, ширина кажется разной для каждого уровня, потому что они не включают свойство margin родительского элемента:

В настоящее время моя структура HTML выглядит следующим образом:

И примененные стили CSS следующие:

.item-name, .item-count {
    word-break: break-all;
    line-height:22pt;
    font-size:10pt;
    border: solid 1px grey;
    padding: 4px;
    display: inline-block;
}
.item-name {
    width:80%;
}
.item-count {
    text-align:center;
    width:20%;
}

Что я должен сделать, чтобы ширина: 80% и ширина: 20% включали ширину поля родительского элемента div, какое бы значение поля не было?

Answer 1

Я знаю, что это не лучшее решение, но у меня сработал следующий прием (250px ~ 20%):

.item-count {
    text-align:center;
    width:250px;
}

И тогда каждый div с классом item-name содержит встроенный стиль со свойством width.рассчитывается на основе ширины и поля родителя:

<div class="item-row" style="margin-left:25px;">
    <div class="item-name id-2_2031" style="width:calc(80% + (25px * 0.8) - 25px)">
    </div>
    <div class="item-count">
    </div>
</div>

...

<div class="item-row" style="margin-left:50px;">
    <div class="item-name id-2_2031" style="width:calc(80% + (50px * 0.8) - 50px)">
    </div>
    <div class="item-count">
    </div>
</div>