Контейнер row
в моей верстке состоит из двух смысловых блоков:
- Слева: блок со списком элементов(генерируется динамически от 1 до 10)
- Справа: блок с выбранным элементом
Можно ли с помощью css/html сделать следующее:
Если блок со списком элементов по высоте меньше заданной величины (например, кейс в котором список состоит из 1 элемента), тогда блок с выбранным элементом должен быть заданной величины, например 400x400.
В случае если блок со списком элементов равен заданной величине или превышает ее тогда оба блока должны быть равными(выравнивание по блоку со списком элементов).
<div className="row">
<div className="col-md-6">
<div className="container item-list-main">
<ul className="list-group">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div className="col-md-6">
<div className="col">
<div className="card">
<div className="planet-details-image-container">
<div className="view">
<div className="Ripple-parent">
<img alt='alt' src="https://via.placeholder.com/300x300">img</img>
</div>
</div>
</div>
</div>
<div className="card-body">
<h4 className="card-title">Title</h4>
<p className="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
</div>