how to prepare the phone input and gender similar to other fields in css?-CodePudding

I have tried creating a simple form in a creative way but couldn't figure out how to style gender and phone input in a similar way that i designed with css. Link to my work is https://codepen.io/TA0011/pen/MWXpLeP.Let me know if you can prepare the same using css and provide a solution to the problem.

*{
  margin:0;
  padding:0;
  outline:none;
  box-sizing:border-box;
  font-family: "poppins", sans-serif;
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:40px;
  background: linear-gradient(115deg, #56d8e4 10%,#9f01ea 90%);
}

.container{
  background:#fff;
  width:800px;
  max-width:800px;
  padding: 25px 40px 10px;
  box-shadow: 25px 40px 10px 40px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container .text{
  font-size:35px;
  font-weight:600;
  text-align:center;
  background: -webkit-linear-gradient(right, #56d8e4,#9f01ea );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.container form{
  padding: 30px 0 0 0 0;
}
.container .form-row{
  display: flex;
  margin: 32px 0; 
}
.input-data .row{
  display:flex;
  gap:0.5rem;
}
.input-data .row select{
  width: 80px;
}
form .form-row .input-data,
.form-row .input-data .form{
  width:100%;
  height: 40px;
  margin: 0 20px;
  position:relative;
}
.textarea{
  height:70px;
}
.input-data select{
    background: none;
    text-align: center;
}
.input-data input:focus ~ label,
.textarea textarea:focus ~ label,
.input-data select:focus ~ label
.input-data input:valid ~ label,
.textarea textarea:valid ~ label,
.input-data select:valid ~ label{
  transform: translateY(-20px);
  color:#3498db;
  font-size: 14px;
  pointer-events:none;
  transition: all 0.3s ease;
}
.input-data input,
.input-data select,
.textarea textarea{
  display:block;
  height:100%;
  width:100%;
  border:none;
  font-size: 17px;
  border-bottom:2px solid rgba(0,0,0,0.12);
}
.textarea textarea{
  resize:none;
  padding-top:10px;
}
.input-data label{
  position:absolute;
  bottom: 10px;
  font-size:16px;
  pointer-events:none;
  transition: all 0.3s ease;
}
.textarea label{
  width:100%;
  bottom:30px;
  background:#fff;
}
.input-data .underline{
  position:absolute;
  bottom:0;
  height: 2px;
  width:100%;
  background:#3498db;
}
.input-data .underline:before,
.input-data .underline:after{
  position:absolute;
  content:"";
  height: 100%;
  width: 100%;
  background: #3498db;
  transform: scaleX(0);
  transform-origin:center;
  transition: all 0.3s ease;
}
.input-data input:focus ~ .underline:before, .underline:after,
.textarea textarea:focus ~ .underline:before, .underline:after,
.input-data select:focus ~ .underline:before, .underline:after,
.input-data input:valid ~ .underline:before, .underline:after,
.textarea textarea:valid ~ .underline:before, .underline:after,
.input-data select:valid ~ .underline:before, .underline:after{
  transform: scaleX(1);
}
.submit-btn .input-data{
  height: 45px !important;
  width:25% !mportant;
  overflow:hidden;
}
.submit-btn .input-data:hover .inner{
  left:0;
}
.submit-btn .input-data .inner{
  height:100%;
  width:300%;
  position:absolute;
  left:-100%;
  background:  -webkit-linear-gradient(right, #56d8e4,#9f01ea );
  transition:all 0.3s ease;
}
.submit-btn .input-data input{
  position:relative;
  z-index: 2;
  background:none;
  border:none;
  color:#fff;
  font-size:17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor:pointer;
}
@media(max-width:700px){
  .container .text{
    font-size: 30px;
  }
  .container form{
    padding: 10px 0 0 0 0;
  }
  .container form .form-row{
    display:block;
  }
  form .form-row .input-data{
    margin: 35px 0 !important;
  }
  .submit-btn .input-data{
    width:40% !important;
  }
}

<div >
  <div > Responsive Contact us form</div>
  <form action="#">
    <div >
      <div >
        <input type="text" required>
        <div ></div>
        <label> First name</label>
      </div>
      <div >
        <input type="text" required>
        <div ></div>
        <label> last name</label>
      </div>
    </div>
      <div >
      <div >
        <input type="text" required>
        <div ></div>
        <label> Email Address</label>
      </div>
      <div >
        <div >
          <select>
            <option> 91</option>
            <option> 92</option>
          </select>
          <input type="text">
          <div ></div>
        </div>
        <label> Phone No.</label>
      </div>
    </div>
     <div >
       <div >
        <input type="text" required>
        <div ></div>
        <label> Website name</label>
      </div>
       <div >
         <select>
           <option>Male</option>
           <option>Female</option>
           <option>Others</option>
         </select>
        <div ></div>
        <label> Gender</label>
      </div>
    </div>
      <div >
        <div >
          <div ></div>
          <textarea cols="30" rows="10" required></textarea>
          <label> Message</label>
        </div>
    </div>
    <div >
        <div >
          <div ></div>
          <input type="submit" Value="submit">
        </div>
    </div>
    </div>
  </form>
</div>

CodePudding user response：

maybe this will help:

 * {
        margin: 0;
        padding: 0;
        outline: none;
        box-sizing: border-box;
        font-family: "poppins", sans-serif;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 40px;
        background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
    }

    .container {
        background: #fff;
        width: 800px;
        max-width: 800px;
        padding: 25px 40px 10px;
        box-shadow: 25px 40px 10px 40px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }

    .container .text {
        font-size: 35px;
        font-weight: 600;
        text-align: center;
        background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .container form {
        padding: 30px 0 0 0 0;
    }

    .container .form-row {
        display: flex;
        margin: 32px 0;
    }

    .gender-select{
        text-align: start !important;
    }

    .input-data .row {
        display: flex;
        gap: 0.5rem;
    }

    .input-data .row select {
        width: 80px;
    }

    form .form-row .input-data,
    .form-row .input-data .form {
        width: 100%;
        height: 40px;
        margin: 0 20px;
        position: relative;
    }

    .textarea {
        height: 70px;
    }

    .input-data select {
        background: none;
        text-align: center;
    }

    .phone-select{
        margin:0;
        width:55px !important;
        display: inline-block !important;
    }
    
    .phone-label{
        left: 60px
    }
    .phone-input{
        display: inline-block !important;
    width: calc(100% - 60px) !important;
    }

    .input-data input:focus~label,
    .textarea textarea:focus~label{
        transform: translateY(-20px);
        color: #3498db;
        font-size: 14px;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .input-data input,
    .input-data select,
    .textarea textarea {
        display: block;
        height: 100%;
        width: 100%;
        border: none;
        font-size: 17px;
        /* border-bottom: 2px solid rgba(0, 0, 0, 0.12); */
    }

    .textarea textarea {
        resize: none;
        padding-top: 10px;
    }

    .input-data label {
        position: absolute;
        bottom: 10px;
        font-size: 16px;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .textarea label {
        width: 100%;
        bottom: 30px;
        background: #fff;
    }

    .input-data .underline {
        position: absolute;
        bottom: 0;
        height: 2px;
        width: 100%;
        background: #3498db;
    }

    .input-data .underline:before,
    .input-data .underline:after {
        position: absolute;
        content: "";
        height: 100%;
        width: 100%;
        background: #3498db;
        transform: scaleX(0);
        transform-origin: center;
        transition: all 0.3s ease;
    }

    .input-data input:focus~.underline:before,
    .underline:after,
    .textarea textarea:focus~.underline:before,
    .underline:after,
    .input-data select:focus~.underline:before,
    .underline:after,
    .input-data input:valid~.underline:before,
    .underline:after,
    .textarea textarea:valid~.underline:before,
    .underline:after,
    .underline:after {
        transform: scaleX(1);
    }

    .submit-btn .input-data {
        height: 45px !important;
        width: 25% !important;
        overflow: hidden;
    }

    .submit-btn .input-data:hover .inner {
        left: 0;
    }

    .submit-btn .input-data .inner {
        height: 100%;
        width: 300%;
        position: absolute;
        left: -100%;
        background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
        transition: all 0.3s ease;
    }

    .submit-btn .input-data input {
        position: relative;
        z-index: 2;
        background: none;
        border: none;
        color: #fff;
        font-size: 17px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
    }

    @media(max-width:700px) {
        .container .text {
            font-size: 30px;
        }

        .container form {
            padding: 10px 0 0 0 0;
        }

        .container form .form-row {
            display: block;
        }

        form .form-row .input-data {
            margin: 35px 0 !important;
        }

        .submit-btn .input-data {
            width: 40% !important;
        }
    }

<div >
    <div > Responsive Contact us form</div>
    <form action="#">
        <div >
            <div >
                <input type="text" required>
                <div ></div>
                <label> First name</label>
            </div>
            <div >
                <input type="text" required>
                <div ></div>
                <label> last name</label>
            </div>
        </div>
        <div >
            <div >
                <input type="text" required>
                <div ></div>
                <label> Email Address</label>
            </div>
            <div >
                <select >
                    <option> 91</option>
                    <option> 92</option>
                </select>

                <input  type="text">
                <div ></div>
                <label > Phone No.</label>
            </div>
        </div>
        <div >
            <div >
                <input type="text" required>
                <div ></div>
                <label> Website name</label>
            </div>
            <div >
                <select >
                    <option>Gender</option>
                    <option>Male</option>
                    <option>Female</option>
                    <option>Others</option>
                </select>
                <div ></div>
                <!-- <label> Gender</label> -->
            </div>
        </div>
        <div >
            <div >
                <div ></div>
                <textarea cols="30" rows="10" required></textarea>
                <label> Message</label>
            </div>
        </div>
        <div >
            <div >
                <div ></div>
                <input type="submit" Value="submit">
            </div>
        </div>
</div>
</form>
</div>