Ggtcf

I have a form that looks like this:

Form

It's a pretty big form so I only show the divs

As you can see this form doesn't look good, and I want it to look better, but I am very bad at styling. all that I want is to do is that the input fields are next to eachother. I alread tried this:

#formdiv 
 max-width: 500px;
 padding: 20px 12px 10px 20px;
 font: 13px Arial, Helvetica, sans-serif;


#form 
 width: 100%;
 padding: 12px 20px;
 margin: 8px 0;
 display: inline-block;
 border: 1px solid #ccc;
 border-radius: 4px;
 box-sizing: border-box;
 background-color: #cccccc;

<div id='formdiv'>
 <form id="form" action="" method="get">
 </form>
</div>

could you please help me? thank you.

EDIT

I want it to be more user friendly

EDIT 2

 <div id='formdiv'>
 <form id="form" action="" method="get">
 <?php 
 $g = 1;
 $vrij = '';
 foreach ($alla as $rowa)
 
 if($g==1):
 $vrij = $rowa['Field'];
 else:
 $vrij .= ',' . $rowa['Field']; 
 endif;
 $g++;
 $int = str_replace("int", null, $rowa['Type']);
 $varchar = str_replace("varchar", null, $rowa['Type']);
 switch($rowa['Type'])
 
 case 'int'.$int.'':
 echo '<input type="checkbox" name="A" value="'. $rowa['Field'] . '" id="'.$rowa['Field'].'">' .$rowa['Field'];
 echo '<input type="text" name="box" id="box'.$rowa['Field'].'">';
 echo '<select id="keuzes" name="keuzes">';
 echo '<option value="som op" id="btn'.$rowa['Field'].'">som op</option>';
 echo '<option value="kleinder dan" id="kd'.$rowa['Field'].'">kleinder dan</option>';
 echo '<option value="grooter dan" id="gd'.$rowa['Field'].'">grooter dan</option>';
 echo '<option value="kleinder of gelijk aan" id="koga'.$rowa['Field'].'">kleinder of gelijk aan</option>';
 echo '<option value="grooter of gelijk aan" id="goga'.$rowa['Field'].'">grooter of gelijk aan</option>';
 echo '<option value="tel op" id="to'.$rowa['Field'].'">tel op</option>';
 echo '</select><br>';
 break;
 case 'varchar'.$varchar.'':
 echo '<input type="checkbox" name="A" value="'. $rowa['Field'] . '" id="'.$rowa['Field'].'">' .$rowa['Field'];
 echo '<input type="text" name="box" id="box'.$rowa['Field'].'">';
 echo '<input type="button" value="zoek naar" id="zn'.$rowa['Field'].'">' . '<br>';

 break;
 case "datetime":
 echo '<input type="checkbox" name="A" value="'. $rowa['Field'] . '" id="'.$rowa['Field'].'">' .$rowa['Field']. '<br>';
 echo 'Begin tijd <input type="text" name="begin" id="begin' . $rowa['Field'] . '">' . '<br>';
 echo 'Eind tijd <input type="text" name="end" id="end' . $rowa['Field'] . '">' . '<br>';
 echo 'Een tijd <input type="text" name="box" id="box'.$rowa['Field'].'">'. '<br>';
 break;
 case "longtext":
 echo '<input type="checkbox" name="A" id="actionc" value="'. $rowa['Field'] . '" id="'.$rowa['Field'].'">' .$rowa['Field'] . '<br>';
 break;
 
 

 ?>
 <br>
 <input type="submit" id="submit" name="submit" value="submit"><br> 
 </form>
 </div>

EDIT 3

this is how I want my form to look like.

Based off the second image you posted about how you would like it to look I created a basic JSFiddle for you (as you didn't post the rendered html code I had to use random values).

Basically, each of your inputs for the form should be wrapped in a nice little container as follows:

<label class="input-container" for="forename">
 <span class="label">First Name</span>
 <input class="input" type="text" id="forename" placeholder="Your name..">
</label>

You would then use flex to display the label and input values next to each other. This will work for all input values - not just basic text ones.

#form 
 width:800px;
 .input-container 
 display:flex;
 flex-direction:row;
 align-items:center;
 width:100%;
 margin-bottom:1rem;
 .label, .input 
 display:flex;
 width:auto;
 
 .label 
 font-size:87.5%;
 padding-right:1rem;
 
 .input 
 padding:.5rem;
 font-size:100%;
 flex-grow:1;
 max-width:500px;
 
 

<div id="formDiv">
 <form id="form">
 <label class="input-container" for="forename">
 <span class="label">First Name</span>
 <input class="input" type="text" id="forename" placeholder="Your name..">
 </label>
 <label class="input-container" for="surname">
 <span class="label">Last Name</span>
 <input class="input" type="text" id="surname" placeholder="Your last name..">
 </label>
 </form>
</div>

https://jsfiddle.net/hz95Lkfu/