Using Javascript to block element send to next line [closed]

I have a button element that is hidden at the beginning.

However, I have to display it on certain trigger using JavaScript. But when its triggered it gets pushed to next line. See the Image below :-

What I actually want is :-

Here is my Html code:-

<div id="toolbar">
  
<a href="#" class="btn btn-secondary">Launch Access Log Report</a>&nbsp;&nbsp;&nbsp;<a href="#" style="display: none" class="btn btn-secondary" type="button" id="fresh" >Refresh Table Updated</a>

</div>

and my JavaScript code which push it to next line:-

function check(data)
{
if (data === 'no')
{ document.getElementById("fresh").style.display='block';}
}

What is messing it up please explain and how can I fix this issue.

Answer

display: block will start on a new line and will take up the full width available. Use display: inline-block or display: inline instead.

Using display: block

<button onclick="show()">Show</button>

<div>
  <a href="#">Launch Access Log Report</a>
  <a href="#" style="display: none; background-color: red;" id="fresh">Refresh Table Updated</a>
</div>

<script>
   function show() {
     document.getElementById("fresh").style.display = "block";
   }
</script>

Using display: inline-block

<button onclick="show()">Show</button>

<div>
  <a href="#">Launch Access Log Report</a>
  <a href="#" style="display: none; background-color: red;" id="fresh">Refresh Table Updated</a>
</div>

<script>
  function show() {
     document.getElementById("fresh").style.display = "inline-block";
  }
</script>