CSS - inline blocks side by side with 100% width

I have two blocks with text. The length of the text is not constant (user input). The left block has short text in it but the right block might contain really long text. The blocks should appear side by side and spread over 100% of the parent's constant width, no more no less.

Simplified Example: http://ift.tt/2x6Zczb

<div style="white-space: nowrap; font-size=xx-large;">
  <span>woohoo</span>
  <div style="display: inline-block; overflow-wrap: break-word; width: 100%; white-space: normal; vertical-align: top;">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
</div>

The problem in this solution is that there is a horizontal scroll bar because the right block takes 100% of its parent's width, but it should less since the comulative width of the two blocks should be 100%.

Any ideas?

Thanks!