显示内联块，不显示同一行中的div

Question

我的两个div：vagrant plugin install vagrant-triggers 和form-panel不在同一行。如何使用data-panel将它们排在同一行中请检查下面给出的代码。我在两个面板上都使用了display：inline-block，但两个div的对齐方式仍然不一样。

display:inline-block

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;
}

Answer 1

将vertical-align: top放在两个div而不是父级上。