The layout I'm trying to achieve:

[![enter image description here](https://i.stack.imgur.com/1X2Zu.png)](https://i.stack.imgur.com/1X2Zu.png)
[![enter image description here](https://i.stack.imgur.com/PHv50.png)](https://i.stack.imgur.com/PHv50.png)

The concept is to have an element that is always centered within a container and then another element that is stuck to the side of it. If this side element is too wide, it should wrap below the main element without disturbing the centering. 

```css
#container {
  width: 400px;
  height: 200px;
  background-color: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#container::before {
  content: '';
  flex: 1;
}

#mainText {
  font-size: 60px;
}

#subText {
  flex: 1;
  font-size: 16px;
  white-space: nowrap;
}
```

```html
<div id="container">
  <span id="mainText">MAIN</span>
  <span id="subText">sub</span>
</div>
```

This snippet is where I've started, but there's a bunch of issues that I'm still scratching my head on how to approach. For one, the sub text element will not wrap correctly, and even if it did I'm certain that the vertical/horizontal centering would be broken. Also, I'm not sure how to make sure the baselines of the two text elements are the same. Perhaps flexbox is not the right approach for this layout? To be clear, **this layout should work for any container size**. Hardcoding positions would be unacceptable.