css - HTML date display alignment -

i designing web page has list of dates appearing on below other. want align dates such line below each other. have tried using align didn't make difference. tried putting style tag got error said: "element "style" not allowed child of element "div" in context."

here's code of page:

<div class="report-title">     <h1>response tracking report</h1> </div> <div class="info">     <div style="width:93%;float:left;">         <p class="title">project: </p>         <p class="value"><?php echo $response_data['project_name']; ?></p>     </div>     <div class="spacer"></div>     <div style="width:7%;float:left;">         <p class="value"><?php echo date("y-m-d"); ?></p>     </div>     <div class="bottom"></div> </div> <div id='response-info' class='info'>     <div style='width:100%;'>         <p class='title'>risk statement: </p>         <p id='risk_statement' class='value'><?php echo $response_data['risk_statement']; ?></p>         <br/><br/>     </div>     <div style='width:24%;float:left;'>         <p class='title'>wbs: </p><p class='value'><?php echo $response_data['wbs']; ?></p>         <br/><br/>         <p class='title'>date of plan: </p><p class='value' ><?php echo $response_data['date_of_plan']; ?></p>         <br/><br/>         <p class='title'>last updated: </p><p class='value' ><?php echo $response_data['date_of_update']; ?></p>         <br/><br/>         <p class='title'>planned closure: </p><p class='value' ><?php echo $response_data['planned_closure']; ?></p>     </div>     <div class='spacer' style='width:1%;float:left;height:1px;'></div>     <div style='width:24%;float:left;'>         <p class='title'>owner: </p><p class='value'><?php echo $response_data['owner']; ?></p>         <br/><br/>         <p class='title'>cost: </p><p class='value'>$<?php echo round($response_data['cost']); ?></p>         <br/><br/>         <p class='title'>release progress: </p><p class='value'><?php echo $response_data['release_progress']; ?></p>         <br/><br/>         <p class='title'>action: </p><p class='value'><?php echo $response_data['action']; ?></p>     </div>     <div class='spacer' style='width:1%;float:left;height:1px;'></div>     <div style='width:50%;float:left;'>         <p class='title'>current status: <br/> </p><p class='value'><?php echo $response_data['current_status']; ?></p>         <br/>         <br/>         <p class='title'>action plan: <br/> </p><p class='value'><?php echo $response_data['action_plan']; ?></p>     </div>     <div id='bottom' style='clear:both;width:100%'></div> </div> <div id="responseupdatetablecontainer" class="jtablecontainer" style="width:100%;"></div> </body> 

how dates displayed currently: http://imgur.com/uxbugwx

how trying them: http://imgur.com/magfryo

i new html please excuse errors. appreciated.

to have div'saligned, need give them same width, problem this, when have dynamic text, , length overflow specifyed width.

one solution, emulate native table style, display property in css
example:

.table { display: table;      } .row   { display: table-row;  } .cell  { display: table-cell; } 

then, html have similar markup:

<div class="table">     <div class="row">         <span class="cell title">wbs:</span>         <span class="cell value">1.1</span>     </div>     <div class="row">         <span class="cell title">planned closure:</span>         <span class="cell value">2014-07-18</span>     </div>     <div class="row">         <span class="cell title">last updated:</span>         <span class="cell value">2014-09-10</span>     </div>     <div class="row">         <span class="cell title">date of plan:</span>         <span class="cell value">2014-04-26</span>     </div> </div> 

jsfiddle example: http://jsfiddle.net/gmolop/csx10g64/