Properly display html tr side by side using CSS - css

Question

Good Day,
I am working on a table that will display data from MySQL using PHP which is pretty much working. My goal is to display this as a simple Identification Card using the data I have from MySQL.
I would consider myself a rookie when it comes to CSS and I need to understand why my display is not going as I wanted.
I did some research online and found this
http://jsfiddle.net/gajjuthechamp/cbEDJ/1/
It is working and I got the display that I wanted but for some reason the first column is shrinking. I tried changing the row width to 50% unfortunately it is doing the same thing. Kindly see image and my code below.
CSS Display Table Row Side by Side
<style>
table {
width: 100%;
}
table tr {
display: inline
}
table tr:nth-child(odd) {
position: relative;
}
table tr:nth-child(odd) td {
position: absolute;
top: 100%;
left: 0;
}
table tr:nth-child(even) {
display: block;
width: 50%;
margin-left: 50%;
}
</style>
I also tried changing the values from top, left, margin-left, and width but first still shrinks. Could no wrap also cause this issue? Any info or suggestion is highly appreciated.

Answer 1

#EdCottrell
I finally got it working thanks a lot for the advised. I use div and it automatically work as I wanted it to be.
CSS for div
<style>
body {
margin: 0;
}
div#card:nth-child(odd) {
width: 50%;
background: lightblue;
display: inline-block;
}
div#card:nth-child(even) {
width: 50%;
background: orange;
display: inline-block;
float: left;
}
.parent {
font-size: 0;
margin: 0;
}
.font {
font-size: 16px;
}
</style>
HTML for div
<div id="card">
<center><b>EMPLOYEE INFORMATION CARD</b></center>
<br><b>Name: <?php echo $row ['EMPLOYEE_NAME']; ?></b>
<br><b>Address:</b> <?php echo $row ['EMPLOYEE_ADDRESS']; ?>
<br><b>Date of Birth:</b> <?php echo $row ['BIRTHDATE']; ?>
<br><b>Polling Place:</b> <?php echo $row ['POLLING_PLACE']; ?>
<br><b>Precint No:</b> <?php echo $row ['PRECINT_NUMBER']; ?>
<br><b>Cluster No:</b> <?php echo $row ['CLUSTER_NUMBER']; ?>
</div>