Two tables next to each other

so I have this problem. I need to put second table next (right) to the first table. Or more like to put it like 10px next to it but have the top of the tables on the same ‘y’ px; Also I dont the tables to be solid, because tables are in for() and there should be more tables then just two (now it is 1+1, then 1+1 and under it anoter 1+1 tables) Now the second table is under the first one. I tried few things but still i can’t figure out the right answer. I am not css master, i’m just learning. Can anybody help?

<div style="width: 400px">
  @foreach ($reminders as $reminder)

<table style="margin-left: 550px; width: 100%; position: center; margin-top: 50px;">
    <tr style="">
      <th colspan="4">{{$reminder->title}}</th>
    </tr>
    <tr> 
     <th colspan="4" style="height: 150px; text-align: left">{{$reminder->text}}</th></tr>
     <tr> 
      <th>
        <form method="post" action="/donereminder" >
              @csrf

        <input type="hidden" name="rem" value="{{$reminder->id}}" readonly style="width: 0%">
        <button type="submit" style="width: 100%">Done</button>
      </form></a></th>
      <th><button class="button" style="width: 100%">Report</button></th>
      <th><a href="/reminders/{{$reminder->id}}/edit"><button class="button" style="width: 100%">Edit</button></a></th>
      <th>
      <form method="POST" action="/reminders/{{ $reminder->id}}">
    @method('DELETE')
    @csrf

    <div class="field">
    <div class="control">
      <button type="submit" class="button" style="width: 100%;">&#128465; </button>
    </div>
  </div>
  </form>
</th></tr>
    </table>

<table style="margin-left: 550px; width: 100%; position: center; margin-top: 50px">
<form method="POST" action="/reminders/{{$reminder->id}}">

  @method('PATCH')
    @csrf

      <tr>
        <th>
          <div class="form-group">
          <label>Name</label>
          <input type="text" class="form-control" name="title" placeholder="Name of reminder" value="{{$reminder->title}}">
        </div>
      </th>
      </tr>
      <tr>
        <th>
          <div class="form-group">
          <label>Text</label>
          <input type="text" class="form-control" name="text" placeholder="Description of your reminder"  value="{{$reminder->text}}">
        </div>
        </th>
      </tr>
      <tr>
        <th> <div class="form-group">
          <label>Typ</label>
          <select class="form-control" name="typ"  value="{{$reminder->typ}}">
            <option name="typ" value="0">Práce</option>
            <option name="typ" value="1">Narozeniny</option>
            <option name="typ" value="2">Sport</option>
            <option name="typ" value="3">Jiné</option>\
          </select>
        </div></th>
      </tr>
      <tr>
        <th> <div class="form-group">
          <label>Priorita</label>
          <select class="form-control" name="priority"  value="{{$reminder->priority}}">
            <option name="priority" value="{{$reminder->priority}}">{{$reminder->priority}}</option>
            <option name="priority" value="10">10</option>
            <option name="priority" value="9">9</option>
            <option name="priority" value="8">8</option>
            <option name="priority" value="7">7</option>
            <option name="priority" value="6">6</option>
            <option name="priority" value="5">5</option>
            <option name="priority" value="4">4</option>
            <option name="priority" value="3">3</option>
            <option name="priority" value="2">2</option>
            <option name="priority" value="1">1</option>
          </select>
        </div></th>
      </tr>
      <tr>
        <th>
           <div class="form-group">
          <label>Done time</label>
          <input class="datepicker" data-date-format="mm/dd/yyyy"  type="date" placeholder="MM/DD/YYYY" name="donetime"  value="{{$reminder->donetime}}">
        </div>
        </th>
      </tr>
      <tr>
        <th>
          <div class="field">
    <div class="control">
      <button type="submit" class="button is-link"  style="width: 25%;">Upravit reminder</button>
    </div>

  </div>
        </th>
      </tr>
    </table>
    </form>

What language syntax is this? Is this some kind of templating engine?

I’m using laravel (for php) but it shouldn’t have effect on css imo :smiley: