JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel">
    <p class="user-title">Date 08.03.2018 User: Joe Doe</p>
    <div>
      <p>Some long text in the paragraph that is wider than the title above it</p>
      <p>Another shorter text</p>
    </div>
</div>

CSS

.panel {
    margin-bottom: 20px;
    width: auto;
    display: inline-flex;
    flex-direction: column;
    box-shadow: 0 2px 4px 0 #C6C2BF;
    padding: 0.5rem 1rem 1rem;
}

.user-title {
    display: flex;
}

.panel > div {
  display: flex;
  flex-direction: column;
}

.panel > div > p {
  display: flex;
  flex-grow: 1;
  width: 0;
}