Grow up to a point

Showing as much as possible from a text, but allowing for an "end blurb" on the same line.

HTML

<div class="container">
  <div id="elem" class="name">Foobar</div>
  <div class="time">&nbsp;• 3 min ago</div>
</div>
<div class="container">
  <div class="name">Foobar -- the quick brown fox jumps over the lazy dog</div>
  <div class="time">&nbsp;• 3 min ago</div>
</div>

CSS

.container {
  display: flex;
  width: 20em;
  border: 1px solid blue;
}
.name {
  flex-shrink: 1;
  background: powderblue;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time {
  flex-shrink: 0;
  background: steelblue;
}

JavaScript

function Cake() { /* Just a dummy class-like constructor for now */ }

// We won't make a ckae if we're busy
var busy = false;
var elem = document.getElementById("elem")

function makeCake ( callback) {
  // If we're busy making a cake, send back an error
  if (busy) {
    return callback(new Error("Already busy with creating a cake. Please wait a bit and try again later."));
  }
  // Well, if we weren't busy before, we are now
  busy = true;

  // Wait one second
  setTimeout(function () { // <- This is a callback function too. It is called after one second.

    // After one second we call the callback function
    callback(null, new Cake());

    // After sending the cake, we're not busy anymore
    busy = false;
  }, 1000);
}
  elem.appendChild("p","Made a cake.");
makeCake(function (err, cake) {
  if (err) { console.error(err); }
  elem.appendChild("p","Made a cake.");
  // => "Made a cake."
});

// This will end with an error because we're busy already
makeCake(function (err, cake) {
  if (err) { console.error(err); }
  // !=> "Already busy with creating a cake. Please wait a bit and try again later."
  console.log("Made a cake.");
});

// Wait 2 seconds
setTimeout(function () {
  // This will work again
  makeCake(function (err, cake) {
    if (err) { console.error(err); }
    console.log("Made a cake.");
    // => "Made a cake."
  });
}, 2000);