Goal
Eventually I want to get something like this (forget about the white border around this is due to the clipping):
Image may be NSFW.
Clik here to view.
Constraints
This elements must sit within the following markup which I cannot change easily:
<div style="position:absolute;top:15px;right:15px;bottom:15px;left:15px"><div style="display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;"><div style="position:relative;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;"><div style="position:absolute;top:0;left:0;right:0;bottom:0;"><!-- place elements here --></div></div></div></div>What I tried
<div class="split-container"><div class="split-heading"><h3>Heading</h3></div><div class="split-content"><p>Content</p></div></div>.split-container { display: flex; height: 100%;}.split-heading { background-color: rgb(198,89,17); color: #fff; padding: 0 5px; /* Add padding to the sides */}.split-heading > h3 { transform: rotate(-90deg); transform-origin: bottom right;}.split-content { flex-grow: 100; background-color: rgb(244,176,132); color: #fff;}Result
https://codepen.io/thothal/pen/qBwxEKO
Image may be NSFW.
Clik here to view.
Issues
- The heading div should only take the needed space (it is too broad right now)
- The heading should vertically and horizontally centered
- The content should be vertically centered
