How can you put a line inside a input? - html

Question

I'm trying to build a input with a line inside of it in the middle. But I don't seem to know how to build it as the line always falls in the bottom but it gets inline with the button's border.
Here is what I've tried so far:
<div>
<input className={styles.replyInput} placeholder='Reply...' />
<div className={styles.grayLine}></div>
</div>
And here is the CSS:
.replyInput {
border: 2px solid #E0E0E0;
border-radius: 10px;
padding: 10px;
outline: none;
width: 100%;
}
.grayLine {
width: 80%;
margin-left: 5%;
position: absolute;
border: 1px solid #E0E0E0;
}
I'm trying to build this with CSS

Answer 1

You can use some approach like this
.mainDiv{
position:relative;
width: 80%;
padding: 2%;
height: 60px;
border: 2px solid #E0E0E0;
border-radius: 8px;
}
.replyInput {
outline: none;
border: none;
width: 100%;
}
.grayLine::after {
position: absolute;
width: 95%;
height: 1px;
content: "";
background: #E0E0E0;
margin-top: 10px;
}
.icons {
margin-top: 20px;
}
<div class='mainDiv'>
<input class='replyInput' placeholder='Reply...' />
<div class='grayLine'></div>
<div class='icons'>Some icons</div>
</div>

Answer 2

.replyInput {
display:block;
border: 2px solid #E0E0E0;
border-radius: 10px;
padding: 10px;
outline: none;
width: 100%;
}
.grayLine {
width: 80%;
top:50%;
position: absolute;
border: 1px solid #E0E0E0;
margin-left:20%;
}
#a{
position:relative;
}
<div id='a'>
<input class='replyInput' placeholder='Reply...' />
<div class='grayLine'></div>
</div>

Answer 3

Use <hr>
fieldset {
padding: 3px 6px;
border-radius: 10px;
border-color: #fefefe;
}
input {
display: inline-block;
width: 90%;
border: 0;
outline: none;
}
hr {
margin: 3px 0;
border-color: #fefefe;
}
menu {
margin: 0 0 0 -40px;
}
button {
border: 0;
background: transparent;
cursor: pointer;
}
.font::before {
content: '\f031';
font-size: smaller;
}
.font::after {
content: '\f031'
}
.contacts::before {
content: '#';
}
.emoticons::before {
content: '\f599'
}
.attach::before {
content: '\f0c6'
}
.send {
float: right
}
.send::before {
content: '\f1d8'
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
<fieldset>
<input id='reply' class='component' placeholder='Reply...'>
<hr>
<menu>
<button class='font fa' type='button'></button>
<button class='contacts fa' type='button'></button>
<button class='emoticons fa' type='button'></button>
<button class='attach fa' type='button'></button>
<button class='send fa' type='button' disabled></button>
</menu>
</fieldset>