I am currently incorporating Bootstrap into my HTML, however, the <a> tag is behaving like a block display despite the fact that I have specified the CSS to be display:inline;
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="card card-body bg-light">
<div class="text-right">
<a class="btn btn-success" href="#">Add Review</a>
</div>
<hr />
<p> <strong>John </strong>- a tag is inline but it's still taking up the space</p>
<a class="btn btn-xs btn-warning" href="#"> Edit Review </a>
<form id="delete_button" action="routeToDelete" method="POST">
<input class="btn btn-xs btn-danger" type="submit" value="Delete" >
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
https://i.stack.imgur.com/4UcD5.png
I have attempted to set the id="delete_button" to display:inline, yet it does not align properly with the a tag. Upon inspecting the a tag, I discovered that the content was occupying the entire block (1042x24) in the developer tools. I also tried setting it to display:inline but saw no change.
The desired outcome is for the EDIT REVIEW and DELETE BUTTON to be on the same line, with both buttons being of equal size.