title: Two sections in html form and how do I create dashboard using only html5 and css3?
body: <p>I'm new to HTML/CSS so I need your help people. I have created a page with form on left side and I want one dashboard to be displayed on the right side, I'm trying to do this but not getting. Tell me how to solve this.</p>
  
  <p><strong>Service V1.html</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;div id="section1"&gt;
  &lt;form class="cbp-mc-form"&gt;
  &lt;fieldset class="scheduler-border"&gt;
  &lt;legend class="scheduler-border"&gt;Service&lt;/legend&gt;
  &lt;div class="cbp-mc-column"&gt;
      &lt;label for="number"&gt;Number&lt;/label&gt;
          &lt;input type="text" id="number" name="number" placeholder="575"&gt;
          &lt;label for="client"&gt;Client&lt;/label&gt;
          &lt;select id="client" name="client"&gt;
              &lt;option&gt;Choose a Client&lt;/option&gt;
              &lt;option&gt;C1&lt;/option&gt;
              &lt;option&gt;C2&lt;/option&gt;
              &lt;option&gt;C3&lt;/option&gt;
          &lt;/select&gt;
          &lt;label for="name"&gt;Name&lt;/label&gt;
          &lt;input type="text" id="name" name="name" placeholder="Kumar"&gt;
          &lt;label for="email"&gt;Email Address&lt;/label&gt;
          &lt;input type="text" id="email" name="email" placeholder="kumar@name.com"&gt;
          &lt;label for="category"&gt;Category&lt;/label&gt;
          &lt;select id="category" name="category"&gt;
              &lt;option&gt;Choose a Category&lt;/option&gt;
              &lt;option&gt;C1&lt;/option&gt;
              &lt;option&gt;C2&lt;/option&gt;
              &lt;option&gt;C3&lt;/option&gt;
          &lt;/select&gt;
          &lt;label for="description"&gt;Description&lt;/label&gt;
          &lt;textarea id="description" name="description"&gt;&lt;/textarea&gt;
          &lt;label for="creation_date"&gt;Date of creation&lt;/label&gt;
          &lt;input type="text" id="creation_date" name="creation_date" placeholder="MM/DD/YYYY"&gt;
          &lt;label for="end_date"&gt;End Date&lt;/label&gt;
          &lt;input type="text" id="end_date" name="end_date" placeholder="MM/DD/YYYY"&gt;
      &lt;/div&gt;    
      &lt;div class="cbp-mc-column"&gt;
      &lt;label for="attachment"&gt;Attachment&lt;/label&gt;
          &lt;input type="file" id="attachment" multiple="multiple" name="attachment"&gt;
      &lt;label for="title"&gt;Title&lt;/label&gt;
      &lt;input type="text" id="title" name="title" placeholder=""&gt;
      &lt;label for="comment"&gt;Comment&lt;/label&gt;
      &lt;textarea id="comment" name="comment"&gt;&lt;/textarea&gt;
      &lt;input class="cbp-sm-submit" type="submit" value="Select All" /&gt;
      &lt;input class="cbp-sm-submit" type="submit" value="Remove" /&gt;
      &lt;input class="cbp-sm-submit" type="submit" value="Add Item" /&gt;
      &lt;input class="cbp-sm-submit" type="submit" value="Download" /&gt;
      &lt;label for="select_files"&gt;Select files&lt;/label&gt;
      &lt;select id="select_files" name="select_files" multiple="multiple" style="height:206px"&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="cbp-mc-submit-wrap"&gt;
  &lt;input class="cbp-mc-submit" type="submit" value="Submit" /&gt;
  &lt;input class="cbp-mc-submit" type="submit" value="Cancel" /&gt;
  &lt;input class="cbp-mc-submit" type="reset" value="Clear" /&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="section2"&gt;
  Section 2 will come here.
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Style.css</strong></p>
  
  <pre><code>#wrapper {
  width: 1400px;
  background-color: #FFF;
  margin-left:auto;
  margin-right:auto;
  }
  #section1 {
  float: left;
  width:650px;
  }
  #section2 {
  float: right;
  width: 750px;
  }
  fieldset.scheduler-border {
      border: none;
      box-shadow:  5px 5px 25px #CCCCCC;
      border-radius: 5px;
  }
  legend.scheduler-border {
      background: #10689a;
      color: #fff;
      padding: 5px 10px ;
      font-size: 22px;
      box-shadow: 0 0 0 1px #CCC;
      border-radius:2px;
      margin-left: 20px;
  }
  .cbp-mc-form {
      position: relative;
  }
  .cbp-mc-form:before, 
  .cbp-mc-form:after { 
      content: " "; display: table; 
  }
  .cbp-mc-form:after { 
      clear: both; 
  }
  .cbp-mc-column {
      width: 40%;
      padding: 10px 10px;
      float: left;
  }
  .cbp-mc-form label {
      font-weight:bold;
      display: block;
      padding: 10px 5px 5px 2px;
      font-size: 0.8em;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor:pointer;
  }
  .cbp-mc-form input,
  .cbp-mc-form textarea
  {
      font-family: 'Lato', Calibri, Arial, sans-serif;
      line-height: 1.5;
      font-size: 1em;
      padding: 5px 10px;
      color: #000;
      display: block;
      width: 230px;
      background: transparent;
  }
  .cbp-mc-form select 
  {
      font-family: 'Lato', Calibri, Arial, sans-serif;
      line-height: 1.5;
      font-size: 1em;
      padding: 5px 10px;
      color: #000;
      display: block;
      width: 252px;
      background: transparent;
  }
  .cbp-mc-form input,
  .cbp-mc-form textarea,
  .cbp-mc-form select {
      border: 1px solid #CCC;
      box-shadow:3px 3px 10px #F2F2F2;
  }
  .cbp-mc-form textarea {
      min-height: 60px;
      min-width:230px;
  }
  .cbp-mc-form input:focus,
  .cbp-mc-form select:focus,
  .cbp-mc-form textarea:focus,
  .cbp-mc-form label:active + input,
  .cbp-mc-form label:active + textarea {
      outline: none;
      border: 1px solid #0099FF;
  }
  .cbp-mc-form select:focus {
      outline: none;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
      color: #10689a;
      font-style: italic;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #10689a;
      font-style: italic;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #10689a;
      font-style: italic;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: #10689a;
      font-style: italic;
  }
  .cbp-mc-submit-wrap {
      text-align: center;
      padding-top:40px;
      padding-left:210px;
      clear: both;
  }
  .cbp-mc-form input.cbp-mc-submit {
  background: #10689a;
  border: none;
  color: #fff;
  width: auto;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  padding: 5px 20px;
  font-size: 1em;
  border-radius: 2px;
  letter-spacing: 1px;
  }
  .cbp-mc-form input.cbp-mc-submit:hover {
      background: #1478b1;
  }
  .cbp-mc-form input.cbp-mc-submit:active
  {
  transition: all .1s linear;
      box-shadow: 0 2px 0 #003333;
      transform: translateY(7px);
  }
  .cbp-mc-form input.cbp-sm-submit
  {
      background: #0099FF;
      color:#FFF;
      border:none;
      border-radius:5px;
      margin-top:10px;
      display:inline-block;
      padding:5px;
      width:100px;
      text-align:center;
      cursor:pointer;
      font-size:1em;
  }
  .cbp-mc-form input.cbp-sm-submit:hover {
      background: #00CCFF;
      border-radius:5px;
  }
  .cbp-mc-form input.cbp-sm-submit:active{
      border:none;
  }
  </code></pre>