border in button html - html

Question

I'm trying to put a border in a button, I tried to create 2 div and then do display: inline-block but it doesn't work, here is my code:
`#vid {
position: absolute;
width: 95px;
height: 60px;
background-color: #ffff;
border: #ffff;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
#h5-vid {
border-radius: 25px;
background: #ffff;
border-color: black;
display: inline-block;
}
<button id="vid"><p>Videos</p><div id="h5-vid"><h5 id="h5-text-vid">New!</h5></button></div>`
This is what I want to get:
This is what I got:

Answer 1

Put both elements with text inside the button:
<button id="vid">
<p>Videos</p>
<h5 id="h5-text-vid">NEW</h5>
</button>
Use display: flex; with justify and align center for the button then simply add border to the h5 element using border: solid 1px black;
Here is a working snippet:
#vid {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 95px;
height: 60px;
background-color: #ffff;
border: none;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
#h5-text-vid {
border: solid 1px black;
border-radius: 25px;
padding: 3px;
font-size: 6pt;
font-weight: 800;
}
body {
/* Just for demo */
background-color: gray;
}
<button id="vid">
<p>Videos</p>
<h5 id="h5-text-vid">NEW</h5>
</button>

Answer 2

Your code didn't work because p tag is block element.
And also p and h5 tag has margin-block-start and margin-block-end.
So I removed those margins, and set display: inline-block to p tag.
Now, it works.
Note: You set border-color to div#h5-vid, but didn't work because div doesn't have border in default.
So I changed it as border: 1px solid black.
p, h5 {
margin-block-start: 0;
margin-block-end: 0;
display: inline-block;
}
#vid{
position: absolute;
width: 95px;
height: 60px;
background-color: #fff;
border: #fff;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
#h5-vid{
border-radius: 25px;
background: #fff;
border: 1px solid black;
display: inline-block;
margin-left: 5px;
padding: 0 3px;
}
<button id="vid"><p>Videos</p><div id="h5-vid"><h5 id="h5-text-vid">New!</h5></div></button>