Two of my div elements, namely form-panel and data-panel, are currently not aligned on the same line. How can I use display:inline-block to align them in a single line? Please review the code provided below. I have already used display:inline-block on both panels, but their alignment remains offset.
var data=[
{"name":"Test Task#1","date":"12/01/2012","assigned":"John Doe"},
{"name":"Test Task#2","date":"12/02/2012","assigned":"John Doe"},
{"name":"Test Task#3","date":"12/03/2012","assigned":"John Doe"},
{"name":"Test Task#4","date":"12/04/2012","assigned":"John Doe"},
{"name":"Test Task#5","date":"12/05/2012","assigned":"John Doe"},
{"name":"Test Task#6","date":"12/06/2012","assigned":"John Doe"},
{"name":"Test Task#7","date":"12/07/2012","assigned":"John Doe"}
];
function load() {
var tableData="";
var stage=$("#stage");
$.each(data,function(i){
stage.prepend('<tr><td> ' + data[i].name + '</td>'+'<td> ' + data[i].date+ '</td>'+'<td style="width:30px;"></td><td> ' + data[i].assigned+ '</td></tr>');
});
}
$( document ).ready(function() {
$( "#sfrm" ).on( "submit", function( event ) {
event.preventDefault();
showValues();
});
function showValues() {
var str = $( "form" ).serializeArray();
var dateArr = str[1].value.split('-');
dateArr.push(dateArr.shift());
var date=dateArr.join('/')
$( "#stage" ).prepend( '<tr><td> ' + str[0].value + '</td>'+'<td> ' + date + '</td>'+'<td style="width:30px;"></td><td> ' + str[2].value + '</td></tr>');
}
});body{
margin: 0px;
padding: 0px;
font-family: arial;
}
.background_panel{
width: 1024px;
margin: 0px auto;
background-color: #e2e2e2;
padding: 10px;
margin-top: 85px;
overflow: auto;
}
h1{
position: relative;
z-index: 1;
margin-bottom: 0;
}
.main_panel{
background-color: #ffffff;
padding: 10px;
position: relative;
}
input[type="text"],input[type="date"]{
height: 40px;
font-size: 16px;
width: 90%;
border: 1px solid #dedede;
background-color: #ececec;
border-radius: 6px;
}
input[type="submit"]{
background-color: #434343;
border: 1px solid #ececec;
border-radius: 6px;
padding: 10px;
color: #fff;
font-size: 18px;
}
.content{
position: relative;
}
.form_panel{
width: 47%;
padding: 10px;
display: inline-block;
background-color: white;
}
.data_panel{
background-color: white;
display: inline-block;
width: 48%;
padding: 10px;
}
.clear{
clear: left;
}
.main_header{
border: 1px solid #f0f0f0;
min-height: 120px;
background-color: #f0f0f0;
z-index: 1;
padding: 10px;
}
hr{
width: 3px;
height: 370px;
position: absolute;
left: 490px;
background-color: #f0f0f0;
border: 1px solid #f0f0f0;
border-radius: 5px;
top: -12px;
}
table{
border-collapse: collapse;
border: 3px solid #dedede;
border-radius: 6px;
}
td{
padding: 9px;
}
tr:nth-child(even){
background-color: #cecece;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="author" content="Spino Tutorials" />
<title>Task Tracker</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body onload="load()">
<div class="background_panel">
<div class="main_header">
<h1>Task Tracker</h1>
<span>v2.0</span>
</div>
<div style="vertical-align:top">
<div class="form_panel">
<h3>Create a Task</h3>
<form id="sfrm">
Task Name<br>
<input type="text" name="task" ><br><br>
Date<br>
<input type="date" name="date"><br><br>
Assigned To<br>
<input type="text" name="assigned" ><br><br>
<input type="submit" id="target" value="Submit">
</form>
</div>
<div class="data_panel">
<h3>Existing Tasks</h3>
<table id="stage" style="table-layout: fixed; max-height: 350px;"></table>
</div>
</div>
<div class="clear">
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</html>