How can I duplicate fields and keep my forms layout?

Hello,

I have a form which has custom css for the 2 fields at the top (Name of Org. and Org. Size.) I duplicated those fields, copied the css, changed the form-col numbers to the new fields and saved, but the css isn't being applied to the new fields. 

Any help would be greatly appreciated!

I cloned your form and noticed the issue you're reporting, after further inspecting it I can see it happens since you're using specific selectors to apply the CSS code, example: 

.form-col-1, .form-col-2 {

  width: 50%;

}

When you shrink the fields they will have automatically added the following class ".form-line-column" which will allow you to handle the general fields instead of handling only some of them. 

I modified your code and ended up with this one that worked on my end, even when you are duplicating the fields: 

@import url('https://shots.jotform.com/elton/genericTheme.css');

.form-submit-button {

    background : #1838a3 !important;

    color : #fff;

    -webkit-border-radius : 5px;

    -moz-border-radius : 5px;

    border-radius : 5px;

    border : none;

    box-shadow: none;

    height : 60px;

    width : 100%;

    font-size : 20px !important;

    font-weight : bold;

    text-shadow : 0 0px #000 !important;

}

.form-line-column {

  width: 50%;

}

@media (min-width: 768px) {

.form-line-column {

  max-width: 47% !important;

  margin-right: 3%;

}

}

input, select, textarea {

  padding: 16px !important;

  background-color: #eee !important;

  color: #999 !important;

}

.form-line {

  padding-left: 0;

  padding-right: 0;

}

.form-all {

border: none !important;

box-shadow: none !important;

}

@media only screen and (max-width: 40em) {

  .form-line-column {

    margin-left: 0;

    margin-right: 0;

  }

}

::-webkit-input-placeholder {

    font-size: 1em !important;

    color: #999;

}

:-moz-placeholder {

    font-size: 1em !important;

}

::-moz-placeholder {

    font-size: 1em !important;

    color: #000;

}

:-ms-input-placeholder {

    font-size: 1em !important;

    color: #000;

}

.form-dropdown {

    font-size: 1em !important;

    color: #000;

}

.form-line:not(.form-line-column){

    padding-right: 3%;

}

Here is an example about how it will work: 

Please replace the current code you have with the one I provided and let us know how it goes.