How to make link alligned right and side by side with bootstrap input?

Question

I'm trying to make a box which has input alligned left and link alligned right.But link is always on the left as default as you can see on the below

Here what I expect below

I tried float:right but it puts the link on the top right corner which I dont prefer.I can use margin-left and top to make it alligned which would be not good practise.Also when I shrink the page I want to keep its position.

.resetToDef{
  display: block;
  width:400px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  text-decoration-line: underline
}


.resetToDef input{
 display:inline-block;
 width:57px;
 border:none;
}

          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

        <div class="resetToDef">
                  <input type="number" class="form-control" placeholder="5" id="shift-task-times-perform" name="shift-task-times-perform">
                    <a href="" > Back to original</a>
                  </div>

sanoj lawrence · Answer 1 · 2020-03-01T19:10:35.047

Simply add float-right to link,

Like <a href="" class="float-right"> Back to original</a>

.resetToDef {
  display: block;
  width: 400px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}

.resetToDef a {
  font-size: 12px;
  color: #FF7921;
  text-decoration-line: underline
}

.resetToDef input {
  display: inline-block;
  width: 57px;
  border: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="resetToDef">
  <input type="number" class="form-control" placeholder="5" id="shift-task-times-perform" name="shift-task-times-perform">
  <a href="" class="float-right btn"> Back to original</a>
</div>

Method 2:

You can use bootstrap input group which is easier inbuilt bootstrap solution.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="input-group mb-3">
  <input type="number" class="form-control border-right-0" placeholder="5" id="shift-task-times-perform" name="shift-task-times-perform">
  <div class="input-group-append">
    <span class="input-group-text bg-white" id="basic-addon2"><a href="">Back to original</a></span>
  </div>
</div>

I tried this as well but see that link is on the top right corner it should be in the same row with input — Timuçin Çiçek, Mar 01 '20 at 18:19
Read my question again and see the pictures that I shared.You can see the expected one — Timuçin Çiçek, Mar 01 '20 at 18:24

How to make link alligned right and side by side with bootstrap input?

1 Answers1