Make div width same as its content width [duplicate] - html

Question

This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 5 years ago.
I have attached a fiddle link to this question. I need the red dot to be closer to the text. For the first & last item, it works well..but if any item is multi line..it has extra whitespace at the right..i want the dot to be closer to the text for the second item also.I tried flex:0 but it makes the whole text area smaller.Please help!
<div class="container">
<div class="item">
<span class="icon">1</span>
<div class="text">News Section</div>
<span class="red"></span>
</div>
<div class="item">
<span class="icon">2</span>
<div class="text">Sample123 Organizational announcement</div>
<span class="red"></span>
</div>
<div class="item">
<span class="icon">3</span>
<div class="text">Sample Text</div>
<span class="red"></span>
</div>
</div>
.container {
width:300px;
padding: .5em 1em;
}
.item {
display: flex;
}
.icon {
width: 18px;
float: left;
}
.text {
display: inline-block;
background: yellow;
}
.red {
margin: 0 0 0 0.5rem !important;
background: #FF0000;
padding: 0 !important;
width: .5rem;
height: .5rem;
border-radius: 50%;
}
Link to fiddle

Answer 1

Use white-space: nowrap; inside .text class it's working.
.container {
width:300px;
padding: .5em 1em;
}
.item {
display: inline-flex;
}
.icon {
width: 18px;
float: left;
}
.text {
display: inline-block;
background: yellow;
white-space: nowrap;
}
.red {
margin: 0 0 0 0.5rem !important;
background: #FF0000;
padding: 0 !important;
width: .5rem;
height: .5rem;
border-radius: 50%;
}
<div class="container">
<div class="item">
<span class="icon">1</span>
<div class="text">News Section</div>
<span class="red"></span>
</div>
<div class="item">
<span class="icon">2</span>
<div class="text">Sample123 Organizational announcement</div>
<span class="red"></span>
</div>
<div class="item">
<span class="icon">3</span>
<div class="text">Sample Text</div>
<span class="red"></span>
</div>
</div>