Div is smaller than the content of the Div - html

Question

I've a DIV, with a button inside. Under this DIV, I've a hr, but the hr isn't under the button. I could make the DIV height bigger, but I don't know how high the button is (it depends on the browser). Can I style the DIV, that all things, which are in the code under the DIV, on the website also under the DIV are? I show below my HTML and the CSS code, and a screenshot from the result.
body {
min-height: 100vh;
}
/* centering the div that is supposed to take all content */
#center {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
#wrapper {
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
box-shadow: -1px 0px 20px 0px rgba(0, 0, 0, 1);
height: 75vh;
padding: 50px;
width: 75vh;
}
hr {
border-style: none;
border-top: 1px solid black;
}
#output {
display: inline-block;
}
/* make button sit on the right side */
#copy {
float: right;
}
<div id="center">
<div id="wrapper">
<div id="top">
<div id="output"></div>
<div id="copy"><button>kopieren</button></div>
</div>
<hr>
</div>
</div>

Answer 1

Is your problem that you want the hr to be placed under the button? Then, applying a width: 100% to it could be a solution. But it depends on the final result you're looking for.
* {
font-family: sans-serif;
color: white;
}
/* Schriftart (Sansserif), Weiss */
body {
background-image: url(img.jpg);
background-position: center;
background-size: cover;
min-height: 100vh;
}
/* positioning background image */
#center {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* centering the div that is supposed to take all content */
#wrapper {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
box-shadow: -1px 0px 20px 0px rgba(0, 0, 0, 1);
height: 75vh;
padding: 50px;
width: 75vh;
}
hr {
border-style: none;
border-top: 1px solid black;
width: 100%;
}
#output {
display: inline-block;
}
#copy {
float: right;
}
/* make button sit on the right side */
button {
background-color: rgb(132, 60, 116);
border: none;
padding: 8px;
border-radius: 10px;
}
<div id="center">
<div id="wrapper">
<div id="top">
<div id="output"></div>
<div id="copy"><button>kopieren</button></div>
</div>
<hr>
</div>
</div>

Answer 2

Just add
#top {
display: flex;
flex-direction: column;
}
Here is the result
* {
font-family: sans-serif;
color: white;
}
/* Schriftart (Sansserif), Weiss */
body {
background-image: url(img.jpg);
background-position: center;
background-size: cover;
min-height: 100vh;
}
/* positioning background image */
#center {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* centering the div that is supposed to take all content */
#wrapper {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
box-shadow: -1px 0px 20px 0px rgba(0, 0, 0, 1);
height: 75vh;
padding: 50px;
width: 75vh;
}
hr {
border-style: none;
border-top: 1px solid black;
}
#output {
display: inline-block;
}
#copy {
float: right;
}
/* make button sit on the right side */
button {
background-color: rgb(132, 60, 116);
border: none;
padding: 8px;
border-radius: 10px;
}
#top {
display: flex;
flex-direction: column;
}
<div id="center">
<div id="wrapper">
<div id="top">
<div id="output"></div>
<div id="copy"><button>kopieren</button></div>
</div>
<hr>
</div>
</div>