How to right align a hyperlink in a <div>? - html

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>
Display Detail</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">
Open New Form
Display Detail
</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>