CSS Ellipsis only for last item, items are dynamic and inline

This is my third implementation to get it fix(previously tried with ul-li). I need to display something like below in one line(Must!) and the last part i.e., description should be shown as ellipsis if it is longer, however, CompanyName should be shown always full. My container width is 310px.

Constraint:Both CompanyName and Description are dynamic, they must be within the wrapper i.e., same line(width:ca. 310px). Description text must use all the width (had big issue fixing this using max-width or width).

It worked using max-width or width but the problem is content are dynamic and if CompanyName is short and Description is long or vice-versa then there will be problem i.e, the description should be to the end of line before ellipsis occurs. That's why I had problem fixing using width or max-width due to dynamic nature of the content.

CompanyName: This company is very good in doing thi.....

My Code:

<div id="wrapper">

<div class="bullet">
    <span class="classBullet"></span>
</div>
<div class="company">
  <span class="spanCompany">Microsoft Long Company:</span>
</div>
    <div class="description">
  <span class="spanDescription">Windows 10 is a ok operating system with occassional bugs and problems otherwise it is a good OS</span>
</div>

CSS:

div.bullet{
  float:left;
  display:inline-block;
  margin-left:10px;
}

.classBullet:before{
  content:"*";
  color:black;
}
.company{
   float:left;
   display:inline-block;
   padding-right:5px;
}
.spanCompany{
   font-weight:bold;
 }
.description{
   float:left;
   display:inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;    
}

Jsfiddle link: link to jsfiddle You can also see my previous try on this jsfiddle.

Solution

You should use the text-overflow property on the .spanDescription class, so when it overflows the .description container it will show the ellipsis.

Then you just need to adjust the width of the description container the way you need it.

For the widths you could use a flexbox. Make a container around the company and the description add display: flex; and it should work. Like this:

div#wrapper{
  width:430px;
  border-style:solid;
  height:20px !important;
}

#inner-wrapper {
  display: flex;
}

div.bullet{
   float:left;
  display:inline-block;
  margin-left:10px;
}

.classBullet:before{
  content:"*";
  color:black;
}
.company{
  float:left;
  display:inline-block;
  padding-right:5px;
}
.spanCompany{
  font-weight:bold;
  white-space: nowrap;
}
.description{
  float:left;
  display:inline-block;
   overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  
}

.spanDescription {
  text-overflow: ellipsis;
}

<div id="wrapper">
  <div class="bullet">
    <span class="classBullet"></span>
  </div>
  <div id="inner-wrapper">
    <div class="company">
      <span class="spanCompany">Microsoft Long Company:</span>
    </div>
    <div class="description">
      <span class="spanDescription">Windows 10 is a ok operating system with occassional bugs and problems otherwise it is a good OS</span>
    </div>
  </div>
</div>

You also need to add white-space: nowrap; to .spanCompany so it will stay in one line.

You could probably delete some of the css like in .description I just added the css needed for this to work.

Edit: The #inner-wrapper in this case is only because of the bullet, it might be a better idea to remove the bullet stuff and the inner-wrapper, use the wrapper as flexbox and add some padding left and the bullet as ::before pseudo-element. Just an Idea, there probably is an easy way with the bullet container too but I just wanted to give a quick example of how to get this to work.