The buttons do not come out side by side-CodePudding

I'm having a problem. I set up my css by setting the buttons side by side, only it's not working.

#btn1, #btn2, #btn3{
    width: 200px;
    height: 40px;
}

<a  id="btn1" href="{{route('wineshop.edit', compact('wineshop'))}}">EDIT</a>
<form action="{{route('wineshop.destroy', compact('wineshop'))}}" method="post">
      @method('delete')
      @csrf
      <button type="submit" id="btn2" >DELETE</button>
</form>
<a  id="btn3" href="{{route('wineshop.index')}}">BACK</a>

Can anyone kindly help me?

CodePudding user response：

Set with Outer div Flex Style

#btn1, #btn2, #btn3
{
  width: 200px;
  height: 40px;
  }
.btn_outer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<div >
<a  id="btn1" href="{{route('wineshop.edit', compact('wineshop'))}}">EDIT</a>
<form action="{{route('wineshop.destroy', compact('wineshop'))}}" method="post">
    @method('delete')
    @csrf
    <button type="submit" id="btn2" >DELETE</button>
</form>
<a  id="btn3" href="{{route('wineshop.index')}}">BACK</a>
</div>