Two tables next to each other - php

Question

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><button class="button" style="width: 100%">Edit</button></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%;">🗑 </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>

Answer 1

There are many ways to do that. I suggest you this one for example.
Considerations:
Use display:inline-block in the child elements. This way, all the elements will go at the same "horizontal line".
vertical-align is set by default as baseline.So set vertical-align: top to avoid this.
The number of tables that fit will depend on their width and the width of their parent.
You can adjust margin-right on each table for the distance between them.
Notice that I deleted your php code and added background to the tables
due to show the result properly.
<div>
<table style="display:inline-block;vertical-align:top;margin-right: 10px;background-color:lightgreen;">
<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><button class="button" style="width: 100%">Edit</button></th>
<th>
<form method="POST" action="/reminders/{{ $reminder->id}}">
<div class="field">
<div class="control">
<button type="submit" class="button" style="width: 100%;">🗑 </button>
</div>
</div>
</form>
</th></tr>
</table>
<table style="display:inline-block;vertical-align:top;background-color:lightgray;">
<form method="POST" action="/reminders/{{$reminder->id}}">
<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>