HTML Input fields style by CSS

index.html

<form action="#" id="form_affiliates">
	<div class="affliate-form">
		<div class="form-group input_fields">
			<input type="text" id="organization" class="form-control" placeholder=" " name="organization" required>
			<label for="organization">Organization</label>
		</div>

		<div class="form-group input_fields">
			<input type="text" id="websiteurl" class="form-control" placeholder=" " name="websiteurl" required>
			<label for="websiteurl">Website URL</label>
		</div>

		<div class="form-group input_fields">
			<input type="text" id="fname" class="form-control" placeholder=" " name="firstname" required>
			<label for="fname">First Name</label>
		</div>

		<div class="form-group input_fields">
			<input type="text" id="lname" class="form-control" placeholder=" " name="lastname">
			<label for="lname">Last Name</label>
		</div>

		<div class="form-group input_fields">
			<input type="email" id="email" class="form-control" placeholder=" " name="email" required>
      <label for="email">Email</label>
		</div>

		<div class="form-group input_fields">
			<input type="text" id="phone" class="form-control" placeholder=" " name="phone" required>
			<label for="phone">Phone</label>
		</div>

		<div class="form-group input_fields fullwidth">
			<textarea name="message" id="message" class="form-control" placeholder=" "></textarea>
			<label for="message">Type a Message</label>
		</div>

		<div class="form-group submit_btn fullwidth">
			<button type="submit" class="primary_cta" id="content_signup">Submit</button>
		</div>
	</div>
</form>

style.css

.form-group.input_fields {
    position:relative; 
}
.form-group.input_fields label {
    font-size: 16px;
    left: 20px;
    margin: 0;
    pointer-events: none;
    position: absolute;
    text-transform: capitalize;
    top: 15px;
    -webkit-transition: .2s;
    transition: .2s;
    font-weight: 400
}
.form-group.input_fields .form-control:focus ~ label, .form-group.input_fields .form-control:not(:placeholder-shown):not(:focus):invalid ~ label, .form-group.input_fields .form-control:not(:placeholder-shown):not(:focus):valid ~ label {
    font-weight: 600;
    font-size: 14px;
    opacity: 1;
    top: 2px
}
.form-group.input_fields .form-control {
    border: 1px solid #ced3da;
    border-radius: 4px;
    font-size: 16px;
    height: 50px;
    opacity: .7;
    padding: 15px 30px 0 20px;
    position: relative
}
.form-group.input_fields .form-control:focus {
    border: 1px solid #123456
}
.input_fields label.error {
    font-weight: 600 !important;
    position: absolute !important;
    font-size: 12px !important;
    top: 45px !important;
    padding-top: 9px;
    color: #d50057 !important;
    left: 2px !important;
}
.msg-error {
    color: #D50057;
    margin: 0px 0 0 100px;
    font-size: 13px;
}