feat: Allow columns to customize their height

[gnapse]

Short description

One issue I found while creating the demo for my Doistalk about the design system components. Having all columns to automatically fill in the entire height is not desirable. It can cause issues when used alongside <Columns alignY="center" />. Take the following scenario:

<Columns alignY="center">
  <Column><Placeholder height="100" /></Column>
  <Column><Placeholder height="200" /></Column>
</Columns>

Since the columns expand their height fully, the alignY ceases to have the desired effect, because the columns are all the same height. However, their content will move towards the top, thus not being aligned vertically towards the centre. This can be seen below. The placeholders are not of the same height, so they should align by the centre. However, since the columns are filling in the full height, the alignY="center" effect is lost. The columns shield the placeholder elements from aligning vertically as intended.

This is currently the cause of misaligned content in the Twist settings:

PR Checklist

• [x] Added tests for bugs / new features
• [x] Updated docs (storybooks, readme)
• [x] Executed npm run validate and made sure no errors / warnings were shown
• [ ] Described changes in CHANGELOG.md
• [ ] Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
• [ ] Updated all static build artifacts (npm run build-all)

Versioning

Not urgent. To be merged and queued for an upcoming release to include it.