JSFiddle - React, Tailwind, and code Playground

HTML

Test1 OK

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.d</p>

Test2 NOT OK<br /><br />

<div class="maddos-category-wrapper">
				<ol>
				<li>
					⭐ <a class="maddos-link" target="_blank" href="#">just-a-little-test1<span class="maddos-icon" style="float:right;margin-right:3px;width:auto;height:auto;"><div class="ti" title="Timer">🕓180</div><div class="bi" title="Timer">💰60</div></span></a> 				
          </li>
				<li>
					⭐ <a class="maddos-link" target="_blank" href="#">just-a-little-test1<span class="maddos-icon" style="float:right;margin-right:3px;width:auto;height:auto;"><div class="ti" title="Timer">🕓180</div><div class="bi" title="Timer">💰60</div></span></a> 	
          </li>
				
				<li>
					⭐ <a class="maddos-link" target="_blank" href="#">just-a-little-test1<span class="maddos-icon" style="float:right;margin-right:3px;width:auto;height:auto;"><div class="ti" title="Timer">🕓180</div><div class="bi" title="Timer">💰60</div></span></a> 	
          </li>
				<div class="clearfix"></div>
				</ol>
				</div>

CSS

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px; }

.maddos-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 #display:inline-block; /* ISSUE. REMOVE # TO TEST */
  max-width: 60px; }
  
  .maddos-category-wrapper {
	background: none repeat scroll 0% 0% #fff;
	color: #9f9f9f;
	overflow-y: auto;
	padding-top: 10px;
	position: relative;
}

.maddos-category-wrapper ol {
	list-style: decimal outside none;
	padding-top:10px;
}

.maddos-category-wrapper ol li {
	margin-bottom: 5px;
	margin-left: -10px;
	position: relative;
}
  
  .ti {
background-color:#F7F7F7;
font-size:10px;
color:#FF0000;
border-radius:4px;
padding:4px;
line-height:10px;
display:inline-block;
}

.bi {
background-color:#FF8000;
font-size:10px;
color:#fff;
border-radius:4px;
padding:4px;
line-height:10px;
display:inline-block;
}