How to align two inputs using CSS - html

Question

This is my code:
<input class="btn btn-link" value="reply">
<form action="" id="delete_reply">
<input type="submit" class="btn btn-link" value="delete">
</form>
I would like to align the two inputs. How's that possible ?
Update: Because I should have an output inside the form, I added another input outside of it, because both links should look the same.

Answer 1

I have modified your code a little bit please check it might help you
.form-container{
text-align:center;
}
<div class="form-container">
<form action="" id="delete_reply">
<input class="btn btn-link" value="reply">
<input type="submit" class="btn btn-link" value="delete">
</form>
</div>

Answer 2

You could achieve this wrapping the content inside a div container setting width to it and to your form and using flex-box like this:
<div class="inputs">
<input type="text">
<form action="">
<input type="text">
</form>
</div>
And
.inputs {
width: 100%;
display: flex;
}
.inputs form {
width: 400px;
}

Answer 3

You can just make the form display to be inline.
form{
display:inline;
}
<input class="btn btn-link" value="reply">
<form action="" id="delete_reply">
<input type="submit" class="btn btn-link" value="delete">
</form>

Answer 4

Simply move the 1st input inside the form tag.
<form action="" id="delete_reply">
<input class="btn btn-link" value="reply">
<input type="submit" class="btn btn-link" value="delete">
</form>
Or use display: inline-block
<style>
.btn btn-link {
display: inline-block;
}
</style>

Answer 5

Just put the input tag inside the form
<form action="" id="delete_reply">
<input class="btn btn-link" value="reply">
<input type="submit" class="btn btn-link" value="delete">
</form>
Or if you want to Just keep the html structure as it is and add
form {
display: inline;
}
<input class="btn btn-link" value="reply">
<form action="" id="delete_reply">
<input type="submit" class="btn btn-link" value="delete">
</form>

Answer 6

Add float: left; to both of your inputs.