Растянуть правый список до размера левого

.p-layout {
                    display: flex;
                    flex-direction: column;
                }

                .p-content {
                    display: flex;
                    flex-direction: row;
                    
                    justify-content: center;
                    align-content: space-between;
                    padding-top: 30px;
                }

                .p-content ul{
                    background-color: #f9f9f9;
                }

                .p-content ul li {
                    padding: 10px;
                }

                .p-content-col {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                }

                .p-content-label {
                    margin-left: 30px;
                }

                .p-content-btn-box {
                    display: flex;
                    flex-direction: row;

                    justify-content: center;

                    padding: 10px;
                    margin: 0 auto;
                }

                .btn-param {
                    width: 80px;
                    padding: 10px;  
                }
            <div class="p-layout">
                <div class="p-content">
                    <div class="p-content-col">
                        <div>
                        <label class="p-content-label" for="">Заголовок: </label>
                    </div>
                        <div>
                        <ul id="id_groups">
                            <li>
                                <label for="id_groups_0">
                                    <input type="checkbox" name="groups" value="0" id="id_groups_0">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_groups_1">
                                    <input type="checkbox" name="groups" value="1" id="id_groups_1">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_groups_2">
                                    <input type="checkbox" name="groups" value="2" id="id_groups_2">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_groups_3">
                                    <input type="checkbox" name="groups" value="3" id="id_groups_3">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_groups_4">
                                    <input type="checkbox" name="groups" value="4" id="id_groups_4">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_groups_5">
                                    <input type="checkbox" name="groups" value="5" id="id_groups_5">
                                    Элемент
                                </label>
                            </li>
                        </ul>
                        </div>
                        <div class="p-content-btn-box">
                            <div class="btn-param">Отправить</div>
                            <div class="btn-param">Отправить</div>
                        </div>
                    </div>
                    <div class="p-content-col">
                        <label class="p-content-label" for="">Заголовок: </label>
                        <ul id="id_sources">
                            <li>
                                <label for="id_sources_0"><input type="checkbox" name="sources" value="0"
                                        id="id_sources_0">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_sources_1"><input type="checkbox" name="sources" value="1"
                                        id="id_sources_1">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_sources_2"><input type="checkbox" name="sources" value="2"
                                        id="id_sources_2">
                                    Элемент
                                </label>
                            </li>
                        </ul>
                        <div class="p-content-btn-box">
                            <div class="btn-param">Отправить</div>
                            <div class="btn-param">Отправить</div>
                        </div>
                    </div>
                </div>
            </div>

Как растянусь правый список до уровня левого? введите сюда описание изображения


Ответы (1 шт):

Автор решения: Alexandr

.p-layout {
  display: flex;
  flex-direction: column;
}

.p-content ul li {
  padding: 10px;
}

.p-content-label {
  margin-left: 30px;
}

.p-content-btn-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 10px;
  margin: 0 auto;
}

.btn-param {
  width: 80px;
  padding: 10px;
}

.p-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 30px;
  align-content: stretch;
}

.p-content ul {
  background-color: #f9f9f9;
  height: 100%;
  height: -webkit-fill-available;
  
}

.p-content-col {
  display: flex;
  flex-direction: column;
}
<div class="p-layout">
                <div class="p-content">
                    <div class="p-content-col">
                        <div>
                        <label class="p-content-label" for="">Заголовок: </label>
                    </div>
                        <div>
                        <ul id="id_groups">
                            <li>
                                <label for="id_groups_0">
                                    <input type="checkbox" name="groups" value="0" id="id_groups_0">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_groups_1">
                                    <input type="checkbox" name="groups" value="1" id="id_groups_1">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_groups_2">
                                    <input type="checkbox" name="groups" value="2" id="id_groups_2">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_groups_3">
                                    <input type="checkbox" name="groups" value="3" id="id_groups_3">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_groups_4">
                                    <input type="checkbox" name="groups" value="4" id="id_groups_4">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_groups_5">
                                    <input type="checkbox" name="groups" value="5" id="id_groups_5">
                                    Элемент
                                </label>
                            </li>
                        </ul>
                        </div>
                        <div class="p-content-btn-box">
                            <div class="btn-param">Отправить</div>
                            <div class="btn-param">Отправить</div>
                        </div>
                    </div>
                    <div class="p-content-col">
                        <label class="p-content-label" for="">Заголовок: </label>
                        <ul id="id_sources">
                            <li>
                                <label for="id_sources_0"><input type="checkbox" name="sources" value="0"
                                        id="id_sources_0">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_sources_1"><input type="checkbox" name="sources" value="1"
                                        id="id_sources_1">
                                    Элемент
                                </label>
                            </li>
                            <li>
                                <label for="id_sources_2"><input type="checkbox" name="sources" value="2"
                                        id="id_sources_2">
                                    Элемент
                                </label>
                            </li>
                        </ul>
                        <div class="p-content-btn-box">
                            <div class="btn-param">Отправить</div>
                            <div class="btn-param">Отправить</div>
                        </div>
                    </div>
                </div>
            </div>

введите сюда описание изображения

→ Ссылка