custom-input.css

*{font-family:Arial, Helvetica, sans-serif;}
input{ padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
input:focus{color: #212529; background-color: #fff; border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);}

label{padding: .375rem .75rem; line-height: 1.5; display: inline-block; font-weight: 600; color:#333; min-width: 100px;}
.custom_input_wrapper{margin: .5rem 0;}
.custom_input_wrapper p{display: none; margin:.375rem .75rem; font-size: .75rem;}
.custom_input_wrapper.inline{display: flex; margin: 1rem 0;}

.has-error input {border-color: #dc3545;}
.has-error input:focus{box-shadow: 0 0 0 .25rem rgb(220, 53, 69,.25);}
.has-error p, .has-error label, 
.underline.has-error:focus-within label, .underline.filled.has-error label{color: #dc3545!important;}
.inputWrapper{display: flex; flex-direction: column; flex-basis: 0;}

.custom_input_wrapper.underline{margin: 1.5rem 0;}
.underline{position: relative;}
.underline input, .underline input:focus{border-width:0 0 2px 0 ; border-radius: 0; box-shadow: none;}
.underline label{top: 0; position: absolute; color:#666; transition: all .15s ease-in-out;}
.underline input::placeholder{font-size: 0;}
.underline:focus-within label, .underline.filled label{top: -20px; font-size: .75rem; color:#333}

.col-sm-2, .col-sm-4{flex:0 0 auto;}
.col-sm-2{width:16.66666667%}
.col-sm-4{width:25%}