Circle should take all available container height and depend on it. Circle width should be the same as height. How to make circle width depend on height? Current behavior:
.container { width: 300px; height: 150px; border: 1px solid black; display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 20px;}.circle { height: 100%; border-radius: 50%; background-color: green; display: flex; align-items: center; justify-content: center;}<div class="container"><div class="circle"> i</div><div> Text</div></div>Needed behavior (width & height shouldn't be hardcoded):
If container height changes it should influence circle height & width too