How to truncate a child item only until width of another child item

Question

I have a div with two child items. I want the second child item to get truncated till the width of the first child item. The width of the first child item shouldn't be specified. I saw a few solutions using width: min-content on the parent, but they don't seem to work with text-overflow:ellipsis.

Here's my code:

html {
  padding: 30px;
  box-sizing: border-box;
}

.wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  border: 2px solid red;
  padding: 5px;
}

.title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}

.metadata {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

<div class="wrapper">
  <span class="title">This is a title</span>
  <div class="metadata">This is a long long long long metadata</div>
</div>