how to place label on top left corner of input field in html/css

Please refer the image below for reference. I want a similar kind of form with label being placed on top of input field in top left corner.

Img:

Thanks in advance!

--- update ---

I tried and i was able to place label separately on top of the input field and was unable to merge it.

this is how it looks currently:

<div class="form-group mt10">
            <label for="inputName">Name <span class="reqField">*</span></label>
            <input required type="text" class="form-control" id="inputName" placeholder="Name">
        </div>
        <div class="form-group">
            <label for="inputCountry">Country</label>
            <input type="text" class="form-control" id="inputCountry" placeholder="Country">
        </div>

Solution

Something like this will help.

body.app-body {
    background: #cecece;
}
.form-group {
    border: 2px solid;
    margin: 10px;
    border-radius: 15px;
    margin-top: 20px;
}

.form-group>label {
    position: absolute;
    top: 6px;
    left: 20px;
    padding: 5px 10px;
    border-radius: 15px;
    background: #fff;
}

.form-group>input {
    border: none;
    background: transparent;
}

<body class="app-body">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <form id="first_name">
        <div class="form-group">
            <label>First name</label>
            <input type="text" class="form-control input-lg" />
        </div>
    </form>
</body>