Seperating button and display target area

[joon1]

When the page at http://dot.kr/qna/230116problem/ is loading, it is like the following.

Because the dynamic text “show Ads, and show Ads” inside the button is long, the button in black background is long.
It is very natural.
However,
Although the text “alarm alarm alarm” in the display target area is small in width, the display target area in white background is not small.
Therefore, there is some useless white empty space on the right side of the display target area.

It is not only useless but also hide the main contents which is under

If you click the button “show ads”, it is like the following.

Because the dynamic text “ads ads ads ads ads ads ads ads ads ads ads ads ads ads ads” is long in width, the display target area becomes wide.
It is very natural.
However,
Although the text “hide Ads” in the button area is small in width, the button area in black background is not small in width
Therefore, there are some useless black empty spaces on the left and right side of the text “hide Ads” of the button in black background.

It is not only useless but also hide the main contents which is under.

For removing the useless empty spaces,
I think that seperating the button and display target area can be a solution.

if the dynamic text in the button is short, the button area in black becomes small in width regardless of the display target area.
if the dynamic text "ads ads ads ads ads ads ads ads ads ads ads ads ads ads ads” of the display area becomes just “ads”, the white display area becomes small in width regardless of the button area.

Is it possible with your help?

[PaulOB]

If you want the button and the text box width to be controlled by their own content then do something like this:

.alarm{
min-width:0;
display:table;
}
p.title{
display:table;
margin-left:auto;
margin-right:auto;
}
p.title .button{
width:auto;
}