how to make multilpe line in place holder and style them differently - html

Question

What I want is for some of the input fields to have two place holder in given image below exactly same like picture given below. I have tried a lot but nothing works.
<form class="subscribe-form">
<div class="personal-information">
<select name = "country" id="country">
<span>Country</span>
<option value ="US" >US</option>
<option value = "India">India</option>
<option value = "Malaysia">Malaysia</option>
</select>
<select name ="cardType" id="cardType">
<option value = "Amex">Amex</option>
<option value = "Visa">Visa</option>
<option value = "Master card">Master card</option>
</select>
<input type="text" id="cnum" name="address" placeholder="Card Number"/>
<div class="date-container">
<div class="card-data">
<input type="text" id="expyear" name="expyear" placeholder="Expiry Date">
<input type="text" id="csc" name="csc" placeholder="CSC"/>
</div>
<div class="name-data">
<input type="text" id="fname" name="firstname" placeholder="First Name"/>
<input type="text" id="lname" name="lastname" placeholder="Last Name"/>
</div>
</div>
</div>
<div class="Billing-deatails">
<h3>Billing Address</h3>
<input type="text" id="line1" name="line2" placeholder="Address Line 1"/>
<input type="text" id="line2" name="line2" placeholder="Address Line 2"/>
<input type="text" id="Town/city" name="Town/city" placeholder="Town/city"/>
<div class="numberType">
<select name = "country" id="country2">
<option value ="US" >US</option>
<option value = "India">India</option>
<option value = "Malaysia">Malaysia</option>
</select>
<input type="text" id="number" name="number" placeholder="Postcode"/>
</div>
</div>
<div class="contact-information">
<h5>Contact Information</h5>
<div class="number-info">
<select name = "phoneType" id="phoneType">
<option value ="Mobile" >Mobile</option>
</select>
<input type="text" id="number" name="number" placeholder="+65"/>
</div>
<input type="email" id="email" name="email" placeholder="Email Address"/>
</div>
</div>
<div class="subscribe-btn">
<button type="submit">SUBSCRIBE</button>
</div>
</form>

Answer 1

There are no multiple placeholder things in HTML. You have to use the Label with custom CSS.You can try the below code but I have done it for only one Select box you can use the same for others. You can edit the CSS as per your convenience.
.select-wrap
{
border: 1px solid #777;
border-radius: 4px;
margin-bottom: 10px;
padding: 0 5px 5px;
width:200px;
background-color:#ebebeb;
}
.select-wrap label
{
font-size:10px;
text-transform: uppercase;
color: #777;
padding: 2px 8px 0;
}
select
{
background-color: #ebebeb;
border:0px;
}
<div class="select-wrap">
<label>Country</label>
<select name = "country" id="country" style="width: 100%;">
<span>Country</span>
<option value ="US" >US</option>
<option value = "India">India</option>
<option value = "Malaysia">Malaysia</option>
</select>
</div>