How to right align a hyperlink in a ?

Question

I need to right align a hyperlink in a <div>, however the only way I can get it to move right is to use the <p> tag. This puts the hyperlink on a new line rather than the same line.

How can I get it on the same line, and also give some spacing? Right now it looks like a run on sentence

     <div>
         <label class="control-label" for="ddlProfile">Profile:</label>
          <input type="text" data-ng-model="viewModel.Name" class="form-control"  />
          <button >New</button>
          <button >Edit</button>
          <p style="text-align:right; display:block; margin:auto"><a href="https://www.w3schools.com" >Open New Form</a>
          <a href="https://www.w3schools.com">Display Detail</a></p>
     </div>

Answer 1

You can use flexbox for this. Wrap the content in two parts - one for the left side, and another for the right. Then use margin to position the right side as you want.

.flex {
  display: flex;
}

.right {
  margin-left: auto;
}
/* your second question */

.right a {
  margin-left: 1em;
}

<div class="flex">
  <div class="left">
    <label class="control-label" for="ddlProfile">Profile:</label>
    <input type="text" data-ng-model="viewModel.Name" class="form-control" />
    <button>New</button>
    <button>Edit</button>
  </div>
  <div class="right">
    <a href="https://www.w3schools.com">Open New Form</a>
    <a href="https://www.w3schools.com">Display Detail</a>
  </div>
</div>

Answer 2

Why not just float the elements to the right? but you need to change the order of the elements.

.float-right{
  float:right;
}

.right-space{
  padding-right:10px;
}

<div>
  <label class="control-label" for="ddlProfile">Profile:</label>
  <input type="text" data-ng-model="viewModel.Name" class="form-control" />
  <button>New</button>
  <button>Edit</button>
    <a class="float-right" href="https://www.w3schools.com">Display Detail</a>
  <a class="float-right right-space" href="https://www.w3schools.com">Open New Form</a>
</div>