0

Edit: First, thanks for the attempts to help, I now realize my question was phrased incorrectly.

What I am looking to accomplish is to have the checkbox's sit in a two-column layout. Not have the Radio and Check box sections float next to each other, but rather have the check box choices sit in two column display, similar to this: http://www.clearcom.com/support/software-update-form

The check boxes are in a two column layout

Here is the real problem: I cannot change the code of the HTML at all, I have no control over this because it is a Pardot form I am editing, and am told I have to control the elements using just CSS. 

#pardot-form {
  max-width: 500px;
  width: 400px;
  padding: 10px 20px;
  background: #00AEC7;
  margin: 10px auto;
  border-radius: 8px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

form.form input.text,
form.form textarea.standard,
form.form input.date {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  font-size: 15px;
  color: #000000;
  margin: 0;
  outline: 0;
  padding: 7px;
  width: 90%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  box-shadow: 0 1px 0 rgha(0, 0, 0, 0.03) inset;
  margin-bottom: 5px;
}

input.radio {
  background: #FF0004 !important;
}

form.form select {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  font-size: 15px;
  color: #000000;
  margin: 0;
  outline: 0;
  padding: 7px;
  width: 90%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  box-shadow: 0 1px 0 rgha(0, 0, 0, 0.03) inset;
  margin-bottom: 5px;
}

form.form input.text:focus,
form.form textarea.standard:focus,
form.form input.date:focus,
form.form select:focus {
  background: #ffffff;
  -moz-box-shadow: 0 0 8px #19478C;
  -webkit-box-shadow: 0 0 8px #19478C;
  box-shadow: 0 0 8px #19478C;
  border: 1px solid #19478C;
}

form.form p label {
  font-size: 18px;
  color: #ffffff !important;
  font-weight: bold;
  padding-top: 0px;
  padding-bottom: 5px;
  font-family: Helvetica, Arial, sans-serif;
  float: none;
  text-align: left;
  width: 75%;
}

.interest {
  width: 90% !important;
  height: 100px !important;
}

form.form p.required label,
form.form span.required label {}

form.form p.required label.field-label:after {
  content: "*";
  color: #FF0004;
}

form.form p.submit {
  margin-left: 5px;
}

form.form p.no-label {
  margin-left: 50px;
}

form.form p span.description {
  margin-left: 0px;
}


/* SUBMIT BUTTON --------------------*/

form.form p.submit input {
  position: relative;
  display: block;
  padding: 10px 15px 12px 15px;
  border-radius: 11px;
  color: #ffffff;
  margin: 0 auto;
  background: #19478C;
  font-size: 18px;
  text-align: center;
  font-style: bold;
  width: 70%;
  border: 1px solid #3582F4;
  border-width: 1px 1px 5px;
  margin-bottom: 10px;
}

form.form p.submit input:hover {
  background: #0054D4;
}

form.form p.submit {
  margin-top: 0px;
  margin-bottom: 0px;
}


/* SUBMIT BUTTON END -----------*/

.pd-radio,
.pd-checkbox {
  float: left;
  width: 98%
}

.value .inline {
  width: 20%;
  display: block;
  clear: right;
}

.value {
  padding-left: 5px;
  width: 98%;
  display: block;
  clear: right;
}

.inline {
  width: 50%;
  display: inline;
  clear: right;
}

.value input[type=radio] {
  float: left;
  display: inline;
}
<form action="http://www.website.com" class="form" id="pardot-form">
  <p class="form-field  first_name pd-text required    ">
    <label class="field-label">First </label>
    <input type="text" value="" class="text" size="30" maxlength="40" onchange="" />
  </p>
  <div style="display:none"></div>
  <p class="form-field  last_name pd-text required    ">
    <label class="field-label">Last </label>
    <input type="text" value="" class="text" size="30" maxlength="80" onchange="" />
  </p>
  <div style="display:none"></div>
  <p class="form-field  company pd-text required    ">
    <label class="field-label">Company</label>
    <input type="text" value="" class="text" size="30" maxlength="255" onchange="" />
  </p>
  <div style="display:none"></div>
  <p class="form-field  email pd-text required    ">
    <label class="field-label">Email</label>
    <input type="text" value="" class="text" size="30" maxlength="255" />
  </p>
  <div style="display:none"></div>
  <p class="form-field  country pd-select required    form-field-master">
    <label class="field-label">Country</label>
    <select class="select" onchange="">
<option value="27007" selected="selected"></option>
<option value="27009">United States</option>
<option value="27011">Canada</option>
<option value="27013">Afghanistan</option>
</select>
  </p>
  <div style="display:none"></div>
  <p class="form-field  state pd-select required    form-field-slave dependentFieldSlave">
    <label class="field-label">State/Territory</label>
    <select class="select" onchange="">
<option value="27493" selected="selected"></option>
<option value="27495">Alabama</option>
<option value="27497">Alaska</option>
<option value="27499">Alberta</option>
<option value="27501">Arizona</option>
<option value="27503">Arkansas</option>
</select>
  </p>
  <div style="display:none"></div>
  <p class="form-field  Product_Interest pd-select required    ">
    <label class="field-label">Product Interest</label>
    <select size="5" multiple="multiple" onchange="" class="interest">
<option value="27623">Choice 1</option>
<option value="27625">Choice 2</option>
<option value="27627">Choice 3</option>
<option value="27629">Choice 4</option>
<option value="27631">Choice 5</option>
<option value="27633">Choice 6</option>
<option value="27635">Choice 7</option>
</select>
  </p>
  <div style="display:none"></div>
  <p class="form-field  Customer_Type pd-select required    ">
    <label class="field-label">Customer Type</label>
    <select class="select" onchange="">
<option value="" selected="selected"></option>
<option value="27657">Value 1</option>
<option value="27659">Value 2</option>
<option value="27661">Value 3</option>
<option value="27663">Value 4</option>
</select>
  </p>
  <div style="display:none"></div>
  <p class="form-field  GRG_Member pd-radio required  ">
    <label class="field-label">Member</label>
    <span class="value"> <span class="" style="">
<input type="radio"   value="27665" onchange="" />
<label class="inline" >1 </label>
</span> <span class="" style="">
<input type="radio"  value="27667" onchange="" />
<label class="inline" >2</label>
</span><span class="" style="">
<input type="radio"  value="27669" onchange="" />
<label class="inline" >3</label>
</span><span class="" style="">
<input type="radio"   value="27671" onchange="" />
<label class="inline" >4</label>
</span></span>
  </p>
  <div style="display:none"></div>
  <p class="form-field  GRG_Professional pd-checkbox required    ">
    <label class="field-label">Professional?</label>
    <span class="value"><span>
<input type="checkbox"  value="27679" onchange="" />
<label class="inline" >Yes</label>
</span><span>
<input type="checkbox"  value="27681" onchange="" />
<label class="inline" >No</label>
</span><span>
<input type="checkbox"   value="27683" onchange="" />
<label class="inline" >Maybe</label>
</span><span>
<input type="checkbox"  value="27685" onchange="" />
<label class="inline" >Don't Know</label>
</span> <span>
<input type="checkbox"  value="27687" onchange="" />
</span></span>
  </p>
  <div style="display:none"></div>
  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>
</form>
CC_Help
  • 1
  • 1
  • 3

4 Answers4

0

You have the lists in <p> tags. Paragraphs are always going to be 100% of the container's width by default. Just set their widths to 50%.

See fiddle here

sn3ll
  • 1,629
  • 1
  • 10
  • 16
  • Just FYI, paragraphs are not the correct containers here. You should really be using `
    `s
     – sn3ll Mar 24 '17 at 17:47
0

https://jsfiddle.net/td5m52kc/
Are you looking for something like this? I deleted all of your span tags and wrapped them in divs to float left and right, respectively, and set the margin for the right div to keep it relatively in place.
New CSS:

.chckbox {
  display: inline-block;
  float: left;
}
#firstlist {
  float: left;
  width: 30%;
}
#secondlist {
  float: right;
  width: 30%;
  margin-right: 50px;
}

HTML: 

  <div id=firstlist>
    <p class="form-field  GRG_Member pd-radio required  ">
      <label class="field-label">Member</label>
      <br>
      <input type="radio"   value="27665" onchange="" />
      <label class="inline" >1 </label>
      <br>
      <input type="radio"  value="27667" onchange="" />
      <label class="inline" >2</label>
      <input type="radio"  value="27669" onchange="" />
      <label class="inline" >3</label>
      <input type="radio"   value="27671" onchange="" />
      <label class="inline" >4</label>
    </p>
  </div>
  <div style="display:none"></div>
  <div id="secondlist">    
    <p class="form-field  GRG_Professional pd-checkbox required    ">
      <label class="field-label">Professional?</label>
      <br>
      <input class="chckbox" type="checkbox" value="27679" onchange="" />
      <label class="inline">Yes</label>
      <br>
      <input class="chckbox" type="checkbox" value="27681" onchange="" />
      <label class="inline">No</label>
      <br>
      <input class="chckbox" type="checkbox" value="27683" onchange="" />
      <label class="inline">Maybe</label>
      <br>
      <input class="chckbox" type="checkbox" value="27685" onchange="" />
      <label class="inline">Don't Know</label>
      <br>
    </p>
  </div>
Aleksandar Misich
  • 487
  • 2
  • 15
0

You have some conflicting classes with .value. I just removed the .value span that wraps your checkbox sections, and that makes everything inline, but then the checkboxes and their label aren't on their own line. To address that, you could replace the spans that wrap each checkbox/label pair, or just make those display: block;. I added .pd-checkbox span {display: block;}

#pardot-form {
  max-width: 500px;
  width: 400px;
  padding: 10px 20px;
  background: #00AEC7;
  margin: 10px auto;
  border-radius: 8px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

form.form input.text,
form.form textarea.standard,
form.form input.date {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  font-size: 15px;
  color: #000000;
  margin: 0;
  outline: 0;
  padding: 7px;
  width: 90%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  box-shadow: 0 1px 0 rgha(0, 0, 0, 0.03) inset;
  margin-bottom: 5px;
}

input.radio {
  background: #FF0004 !important;
}

form.form select {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  font-size: 15px;
  color: #000000;
  margin: 0;
  outline: 0;
  padding: 7px;
  width: 90%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  box-shadow: 0 1px 0 rgha(0, 0, 0, 0.03) inset;
  margin-bottom: 5px;
}

form.form input.text:focus,
form.form textarea.standard:focus,
form.form input.date:focus,
form.form select:focus {
  background: #ffffff;
  -moz-box-shadow: 0 0 8px #19478C;
  -webkit-box-shadow: 0 0 8px #19478C;
  box-shadow: 0 0 8px #19478C;
  border: 1px solid #19478C;
}

form.form p label {
  font-size: 18px;
  color: #ffffff !important;
  font-weight: bold;
  padding-top: 0px;
  padding-bottom: 5px;
  font-family: Helvetica, Arial, sans-serif;
  float: none;
  text-align: left;
  width: 75%;
}

.interest {
  width: 90% !important;
  height: 100px !important;
}

form.form p.required label,
form.form span.required label {}

form.form p.required label.field-label:after {
  content: "*";
  color: #FF0004;
}

form.form p.submit {
  margin-left: 5px;
}

form.form p.no-label {
  margin-left: 50px;
}

form.form p span.description {
  margin-left: 0px;
}


/* SUBMIT BUTTON --------------------*/

form.form p.submit input {
  position: relative;
  display: block;
  padding: 10px 15px 12px 15px;
  border-radius: 11px;
  color: #ffffff;
  margin: 0 auto;
  background: #19478C;
  font-size: 18px;
  text-align: center;
  font-style: bold;
  width: 70%;
  border: 1px solid #3582F4;
  border-width: 1px 1px 5px;
  margin-bottom: 10px;
}

form.form p.submit input:hover {
  background: #0054D4;
}

form.form p.submit {
  margin-top: 0px;
  margin-bottom: 0px;
}


/* SUBMIT BUTTON END -----------*/

.pd-radio,
.pd-checkbox {
  float: left;
  width: 98%
}

.value .inline {
  width: 20%;
  display: block;
  clear: right;
}

.value {
  padding-left: 5px;
  width: 98%;
  display: block;
  clear: right;
}

.inline {
  width: 50%;
  display: inline;
  clear: right;
}

.value input[type=radio] {
  float: left;
  display: inline;
}

.pd-checkbox span {
  display: block;
}
<form action="http://www.website.com" class="form" id="pardot-form">
  <p class="form-field  first_name pd-text required    ">
    <label class="field-label">First </label>
    <input type="text" value="" class="text" size="30" maxlength="40" onchange="" />
  </p>
  <div style="display:none"></div>
  <p class="form-field  last_name pd-text required    ">
    <label class="field-label">Last </label>
    <input type="text" value="" class="text" size="30" maxlength="80" onchange="" />
  </p>
  <div style="display:none"></div>
  <p class="form-field  company pd-text required    ">
    <label class="field-label">Company</label>
    <input type="text" value="" class="text" size="30" maxlength="255" onchange="" />
  </p>
  <div style="display:none"></div>
  <p class="form-field  email pd-text required    ">
    <label class="field-label">Email</label>
    <input type="text" value="" class="text" size="30" maxlength="255" />
  </p>
  <div style="display:none"></div>
  <p class="form-field  country pd-select required    form-field-master">
    <label class="field-label">Country</label>
    <select class="select" onchange="">
<option value="27007" selected="selected"></option>
<option value="27009">United States</option>
<option value="27011">Canada</option>
<option value="27013">Afghanistan</option>
</select>
  </p>
  <div style="display:none"></div>
  <p class="form-field  state pd-select required    form-field-slave dependentFieldSlave">
    <label class="field-label">State/Territory</label>
    <select class="select" onchange="">
<option value="27493" selected="selected"></option>
<option value="27495">Alabama</option>
<option value="27497">Alaska</option>
<option value="27499">Alberta</option>
<option value="27501">Arizona</option>
<option value="27503">Arkansas</option>
</select>
  </p>
  <div style="display:none"></div>
  <p class="form-field  Product_Interest pd-select required    ">
    <label class="field-label">Product Interest</label>
    <select size="5" multiple="multiple" onchange="" class="interest">
<option value="27623">Choice 1</option>
<option value="27625">Choice 2</option>
<option value="27627">Choice 3</option>
<option value="27629">Choice 4</option>
<option value="27631">Choice 5</option>
<option value="27633">Choice 6</option>
<option value="27635">Choice 7</option>
</select>
  </p>
  <div style="display:none"></div>
  <p class="form-field  Customer_Type pd-select required    ">
    <label class="field-label">Customer Type</label>
    <select class="select" onchange="">
<option value="" selected="selected"></option>
<option value="27657">Value 1</option>
<option value="27659">Value 2</option>
<option value="27661">Value 3</option>
<option value="27663">Value 4</option>
</select>
  </p>
  <div style="display:none"></div>
  <p class="form-field  GRG_Member pd-radio required  ">
    <label class="field-label">Member</label>
    <span class="value"> <span class="" style="">
<input type="radio"   value="27665" onchange="" />
<label class="inline" >1 </label>
</span> <span class="" style="">
<input type="radio"  value="27667" onchange="" />
<label class="inline" >2</label>
</span><span class="" style="">
<input type="radio"  value="27669" onchange="" />
<label class="inline" >3</label>
</span><span class="" style="">
<input type="radio"   value="27671" onchange="" />
<label class="inline" >4</label>
</span></span>
  </p>
  <div style="display:none"></div>
  <p class="form-field  GRG_Professional pd-checkbox required    ">
    <label class="field-label">Professional?</label>
    <span>
<input type="checkbox"  value="27679" onchange="" />
<label class="inline" >Yes</label>
</span><span>
<input type="checkbox"  value="27681" onchange="" />
<label class="inline" >No</label>
</span><span>
<input type="checkbox"   value="27683" onchange="" />
<label class="inline" >Maybe</label>
</span><span>
<input type="checkbox"  value="27685" onchange="" />
<label class="inline" >Don't Know</label>
</span> <span>
<input type="checkbox"  value="27687" onchange="" />
</span>
  </p>
  <div style="display:none"></div>
  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>
</form>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
0

Editing this answer. I believe what you're now asking for is this:

#pardot-form {
 max-width: 500px;
 width: 400px;
 padding: 10px 20px;
 background: #00AEC7;
 margin: 10px auto;
 border-radius: 8px;
 font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
form.form input.text, form.form textarea.standard, form.form input.date {
 background-color: rgba(255, 255, 255, 0.8);
 border: none;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 font-size: 15px;
 color: #000000;
 margin: 0;
 outline: 0;
 padding: 7px;
 width: 90%;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
 box-shadow: 0 1px 0 rgha(0, 0, 0, 0.03) inset;
 margin-bottom: 5px;
}
input.radio {
 background: #FF0004 !important;
}
form.form select {
 background-color: rgba(255, 255, 255, 0.8);
 border: none;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 font-size: 15px;
 color: #000000;
 margin: 0;
 outline: 0;
 padding: 7px;
 width: 90%;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
 box-shadow: 0 1px 0 rgha(0, 0, 0, 0.03) inset;
 margin-bottom: 5px;
}
form.form input.text:focus, form.form textarea.standard:focus, form.form input.date:focus, form.form select:focus {
 background: #ffffff;
 -moz-box-shadow: 0 0 8px #19478C;
 -webkit-box-shadow: 0 0 8px #19478C;
 box-shadow: 0 0 8px #19478C;
 border: 1px solid #19478C;
}
form.form p label {
 font-size: 18px;
 color: #ffffff !important;
 font-weight: bold;
 padding-top: 0px;
 padding-bottom: 5px;
 font-family: Helvetica, Arial, sans-serif;
 float: none;
 text-align: left;
 width: 75%;
}
.interest {
 width: 90% !important;
 height: 100px !important;
}
form.form p.required label, form.form span.required label {
}
form.form p.required label.field-label:after {
 content: "*";
 color: #FF0004;
}
form.form p.submit {
 margin-left: 5px;
}
form.form p.no-label {
 margin-left: 50px;
}
form.form p span.description {
 margin-left: 0px;
}
/* SUBMIT BUTTON --------------------*/

form.form p.submit input {
 position: relative;
 display: block;
 padding: 10px 15px 12px 15px;
 border-radius: 11px;
 color: #ffffff;
 margin: 0 auto;
 background: #19478C;
 font-size: 18px;
 text-align: center;
 font-style: bold;
 width: 70%;
 border: 1px solid #3582F4;
 border-width: 1px 1px 5px;
 margin-bottom: 10px;
}
form.form p.submit input:hover {
 background: #0054D4;
}
form.form p.submit {
 margin-top: 0px;
 margin-bottom: 0px;
}
/* SUBMIT BUTTON END -----------*/

.pd-radio, .pd-checkbox {
 float: left;
 width: 98%
}
.value .inline {
    width: 20%;
    display: inline;
    clear: right;
}
span.value span {
    float: left;
    width: 50%;
}
.value {
 padding-left: 5px;
 width: 98%;
 display: block;
 clear: right;
}
.inline {
 width: 50%;
 display: inline;
 clear: right;
}
.value input[type=radio] {
 float: left;
 display: inline;
}
 <form action="http://www.website.com" class="form" id="pardot-form">
     <p class="form-field  first_name pd-text required    ">
      <label class="field-label">First </label>
      <input type="text" value="" class="text" size="30" maxlength="40" onchange="" />
     </p>
     <div style="display:none"></div>
     <p class="form-field  last_name pd-text required    ">
      <label class="field-label">Last </label>
      <input type="text" value="" class="text" size="30" maxlength="80" onchange="" />
     </p>
     <div style="display:none"></div>
     <p class="form-field  company pd-text required    ">
      <label class="field-label">Company</label>
      <input type="text" value="" class="text" size="30" maxlength="255" onchange="" />
     </p>
     <div style="display:none"></div>
     <p class="form-field  email pd-text required    ">
      <label class="field-label">Email</label>
      <input type="text" value="" class="text" size="30" maxlength="255" />
     </p>
     <div style="display:none"></div>
     <p class="form-field  country pd-select required    form-field-master">
      <label class="field-label">Country</label>
      <select class="select" onchange="">
       <option value="27007" selected="selected"></option>
       <option value="27009">United States</option>
       <option value="27011">Canada</option>
       <option value="27013">Afghanistan</option>
      </select>
     </p>
     <div style="display:none"></div>
     <p class="form-field  state pd-select required    form-field-slave dependentFieldSlave">
      <label class="field-label">State/Territory</label>
      <select class="select" onchange="">
       <option value="27493" selected="selected"></option>
       <option value="27495">Alabama</option>
       <option value="27497">Alaska</option>
       <option value="27499">Alberta</option>
       <option value="27501">Arizona</option>
       <option value="27503">Arkansas</option>
      </select>
     </p>
     <div style="display:none"></div>
     <p class="form-field  Product_Interest pd-select required    ">
      <label class="field-label">Product Interest</label>
      <select size="5" multiple="multiple" onchange="" class="interest">
       <option value="27623">Choice 1</option>
       <option value="27625">Choice 2</option>
       <option value="27627">Choice 3</option>
       <option value="27629">Choice 4</option>
       <option value="27631">Choice 5</option>
       <option value="27633">Choice 6</option>
       <option value="27635">Choice 7</option>
      </select>
     </p>
     <div style="display:none"></div>
     <p class="form-field  Customer_Type pd-select required    ">
      <label class="field-label">Customer Type</label>
      <select class="select" onchange="">
       <option value="" selected="selected"></option>
       <option value="27657">Value 1</option>
       <option value="27659">Value 2</option>
       <option value="27661">Value 3</option>
       <option value="27663">Value 4</option>
      </select>
     </p>
     <div style="display:none"></div>
     <p class="form-field  GRG_Member pd-radio required  ">
      <label class="field-label">Member</label>
      <span class="value"> <span class="" style="">
      <input type="radio"   value="27665" onchange="" />
      <label class="inline" >1 </label>
      </span> <span class="" style="">
      <input type="radio"  value="27667" onchange="" />
      <label class="inline" >2</label>
      </span><span class="" style="">
      <input type="radio"  value="27669" onchange="" />
      <label class="inline" >3</label>
      </span><span class="" style="">
      <input type="radio"   value="27671" onchange="" />
      <label class="inline" >4</label>
      </span></span> </p>
     <div style="display:none"></div>
     <p class="form-field  GRG_Professional pd-checkbox required    ">
      <label class="field-label">Professional?</label>
      <span class="value"><span>
      <input type="checkbox"  value="27679" onchange="" />
      <label class="inline" >Yes</label>
      </span><span>
      <input type="checkbox"  value="27681" onchange="" />
      <label class="inline" >No</label>
      </span><span>
      <input type="checkbox"   value="27683" onchange="" />
      <label class="inline" >Maybe</label>
      </span><span>
      <input type="checkbox"  value="27685" onchange="" />
      <label class="inline" >Don't Know</label>
      </span> <span>
      <input type="checkbox"  value="27687" onchange="" />
      </span></span> </p>
     <div style="display:none"></div>
     <p class="submit">
      <input type="submit" accesskey="s" value="SUBMIT" />
     </p>
    </form>

OR

Scrap this altogether and add bootstrap css cdn to your layout template. That way you can add the class col-sm-6 to the form fields in Pardot.

Katy H.
  • 224
  • 1
  • 10