I am trying to create a div whose width changes based on text inside.

The parent div width is auto and child div width is set to 100% which is the percent of parent div's width.

But the parent div occupies the whole page width. How can I maintain the minimum width of div to have the whole text in a single line while dynamically changing the text length.

Here is the implementation

```css
.filled-no-icons {
    border-width:0px;
    position:relative;
    padding:0px;
    width:auto;
    height:auto;
    min-width:91px;
    min-height:36px;
    background-color:rgba(0,0,0,0);
}
.filled-no-icons .rectangle-3 {
border-width:1px;
position:absolute;
padding:0px;
width:100%;
height:100%;
min-width:91px;
min-height:36px;
border-radius:4px 4px 4px 4px ;
background-color:rgba(0,150.0,136.0,255);
left:0%;
top:0%;
}
.filled-no-icons .content {
    border-width:0px;
    position:absolute;
    padding:0px;
    width:calc(100% - 32px);
    height:17px;
    min-width:59px;
    min-height:17px;
    background-color:rgba(0,0,0,0);
    left:16px;
    top:calc(50% - 8.5px);
}
.filled-no-icons .content .label {
    border-width:1px;
    position:absolute;
    padding:0px;
    width:calc(100% - 0px);
    height:17px;
    min-width:59px;
    min-height:17px;
    color:rgba(255,255,255,255);
    font-family:Roboto-Medium;
    font-size:14px;
    font-weight:500;
    letter-spacing:0.75px;
    line-height:16.40625px;
    left:0px;
    top:calc(50% - 8.5px);
}
```

```html
<!DOCTYPE html>
<html>
    <head>
            <title>
                Button test
            </title>
            <meta charset="UTF-8">
    </head>
    <body>
      <div class="filled-no-icons">
        <div class="rectangle-3"></div>
        <div class="content">
          <div class="label">Button</div>
        </div>
      </div>
    </body>
</html>
```

**Edit:** Adding jsfiddle link

<https://jsfiddle.net/3owturhc/>