JSFiddle - React, Tailwind, and code Playground
by wisegorilla
HTML
<div class="wrap">
<img src="https://via.placeholder.com/150/333">
<p>
In the mentioned paragraph, what does this portion exactly mean: "and dividing that size by the respective flex factor to determine a “hypothetical 1fr size". For example, if the highest size in the first row of a grid container was 100px and the grid-auto-row for that row was 2, does this means the size of 1fr for the first row is equal to 50px? –
</p>
<button>
Buy me
</button>
</div>
CSS
.wrap {
width: 300px;
background: #ccc;
display: flex;
flex-direction: column;
height: 800px;
}
.wrap button {
align-self: center;
}