Expanding search box

Hi there!

I would like to modify the search box of my website (https://www.jz-oz.de) and make it an expanding one – like in this example https://codepen.io/llamaswill/pen/rmqfB or on many websites today.

At the moment I have just a white textarea and a small magnify icon.

How can I change the CSS?

.searchform {
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	width: 160px;
	padding: 0;
	margin: 7px 5px 5px 10px;
	height: 20px;
	box-shadow:inset 0 0 1px #222;
	background: #fff;
	float: right;
	margin-right: 20px;
}

.center .searchform {float:none;}

#morefoot .searchform {float:left;}

.searchform .s{
	margin:0;
	border: none;
	margin: 3px 2px 2px 20px;
	font-size: 12px;
	height: 14px;
	width:	130px;
	color: #333;
	overflow: hidden;
}
.phone-two .searchform {
  width: 100%;
  margin-right: 0;
}

#magnify {float:left;position:absolute;margin: 2px 0 0 5px;}

#magnify {margin: 0 0 0 5px/IE8+9; /* IE8+9  */}

.searchform .s:focus {outline:0; border:none;}

.searchform .searchsubmit {display:none;}

Hopefully anybody can help me, please.

Thank you in advance!

Regards from Germany,
Chip