vertical-align-flexbox.htm

<style>

* {
  box-sizing: border-box;
  border: 0 solid black;
  margin: 0;
  padding: 0;
}

view,
text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
}
text {
    display: none;
}
view > text {
    display: flex;
}


.l-split-container {
    /* vertical by default */
    height: 100vh;
    width: 100vw;
}
@media (min-width: 600px) {
    .l-split-container-horizontal {
        flex-direction: row; /* override .l-split-container */
    }
}
.l-split-item {
    flex: 1;
    align-items: center;
    justify-content: center;
}
.l-fill-container {
    flex-direction: row;
}
.l-fill-item {
    align-self: stretch;
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 10vh;
}


.page-start {
    font-size: 4.333vh;
    background: black;
    color: white;
}
.world {
    font-size: calc(.5vw + .75em);
    background: purple;
}

.headline {
    font-size: 2.2em;
}
.byline {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .8em;
    line-height: 2;
}
</style>

<view class="l-split-container l-split-container-horizontal">
    <view class="l-split-item l-fill-container">
        <view class="l-fill-item page-start">
            <text class="headline">Starting Over</text>
            <text class="byline">by Foo Bar</text>
        </view>
    </view>
    <view class="l-split-item l-fill-container">
        <view class="l-fill-item world">
            <text>World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World </text>
        </view>
    </view>
</view>