Struggling with HTML and CSS, I need help achieving the layout shown in the image. How can I use different layouts in a div or organize the controls like in the picture? I'm more familiar with Android layouts, so this is a bit confusing for me. Any assistance would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<style>
form{
display: inline-block;
}
.botones{
padding: 10px 10px;
vertical-align: middle;
/**margin-left: 30px;**/
}
#botonNuevo{
margin-top: 5px;
margin-bottom: 5px;
}
</style>
<script>
$(document).ready(function () {
$('TablePersonal').DataTable();
})
$(TablaPersonal).DataTable
</script>
</head>
<body>
<div class="container">
<div class="row">
<div>
<form>
<table id="TablaPersonal" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>No. Expediente</th>
<th>No. Empleado</th>
<th>Nombre</th>
<th>RFC</th>
<th>Teléfono</th>
<th>Puesto</th>
<th>Lugar de Asignación</th>
<th>Estatus</th>
</tr>
</thead>
<tbody>
<tr>
<td class="marker">1</td>
<td>1</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class=" btn-group botones">
<button id="botonNuevo" type="button" class="btn btn-primary btn-block">Nuevo</button><br>
<button type="button" class="btn btn-primary btn-block">Inactivar</button><br>
<button type="button" class="btn btn-primary disabled btn-block">Modificar</button><br>
<button type="button" class="btn btn-primary disabled btn-block">Exportar</button><br>
<button type="button" class="btn btn-primary disabled btn-block">Eliminar</button><br>
</div>
</div>
</div>
</body>
</html>