Question: [![enter image description here](https://i.stack.imgur.com/aISuj.png)](https://i.stack.imgur.com/aISuj.png)

I want to create add a label to the input field as shown in the attached image. 

How do I do this using pure HTML and CSS?

Answer: 
Try this, change according to your requirement

```css
.input-group{
position:relative;width:100%;overflow:hidden;
}
.input-group input{position:relative;height:45px;border-radius:30px;min-width:500px;box-shadow:none;border:1px solid #eaeaea;padding-left:160px;}
.input-group label{position:absolute;left:0;height:48px;background:#55ccf2;padding:0px 25px;border-radius:30px;line-height:48px;font-size:18px;color:#fff;top:0;width:100px;font-weight:100;}
```

```html
<div  class="input-group">
<input type="text">
<label>Some Text</label>
</div>
```
Maybe this will help!

```css
* {
  margin: 0;
  padding: 0;
}

input {
  padding: 10px 10px 10px 30px;
  width: 200px;
  border: solid 1px lightgray;
  border-radius: 20px;
}

label {
  background-color: lightblue;
  padding: 9px;
  border-radius: 20px;
  color: white;
  margin-right: -30px;
  z-index: 999999;
  position: relative;
}
```

```html
<div>
  <label>First and last name</label>
  <input type="text">
</div>
```