make div only as wide as text content

I'm having trouble with this and it's driving me crazy trying to figure out why it wants to take up the full width.

CodePen

HTML

<div class="api-tile-ribbon-front">
  <div class="api-tile-ribbon-text">
    Finance<a href="#">&nbsp;&#187;</a>
  </div>
</div>

CSS

.api-tile-ribbon-text {
  color: #0C5B85;
  padding-top: 8px;
  display: inline;
  height: 16px;
  margin: 0 5px;
  text-overflow: ellipsis;
  line-height: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.api-tile-ribbon-front {
  position: relative;
  background-image: url("http://ift.tt/1cjVLu4");
  background-repeat: repeat-x;
  height: 36px;
  max-width: 95%;
}

I'm using relative position so I can use the :before and :after images and I'm doing a bunch of stuff to truncate text with ellipsis.

Notice that the ribbons will automatically go to the max-width. I'd like the width to be determined by the textual content within. What is causing it to go full width and how can I stop it?