Clemzd/sufix materialize

## sufix materialize
<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
    .input-field.suffix i {
        position: absolute;
        width: 3rem;
        font-size: 2rem;
        transition: color .2s;
        top: 0px;
        right: 0px;
    }

    .input-field.suffix i.active {
        color: #26a69a;
    }

    .input-field.suffix input,
    .input-field.suffix textarea {
        margin-right: 3rem;
        width: 92%;
        width: calc(100% - 3rem);
    }

    .input-field.suffix textarea {
        padding-top: .8rem;
    }

    .input-field.suffix label {
        margin-right: 3rem;
    }

    @media only screen and (max-width: 992px) {
        .input-field.suffix input {
            width: 86%;
            width: calc(100% - 3rem);
        }
    }

    @media only screen and (max-width: 600px) {
        .input-field.suffix input {
            width: 80%;
            width: calc(100% - 3rem);
        }
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <h1>Suffix demo</h1>
        </div>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field suffix col s6">
                        <input id="icon_prefix" type="text" class="validate">
                        <label for="icon_prefix">First Name</label>
                        <i class="material-icons">account_circle</i>
                    </div>
                    <div class="input-field col s6">
                        <i class="material-icons prefix">phone</i>
                        <input id="icon_telephone" type="tel" class="validate">
                        <label for="icon_telephone">Telephone</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input disabled value="I am not editable" id="disabled" type="text" class="validate">
                        <label for="disabled">Disabled</label>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<!--Import Google Icon Font-->
	<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<!--Import materialize.css-->
	<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
	.input-field.suffix i {
	position: absolute;
	width: 3rem;
	font-size: 2rem;
	transition: color .2s;
	top: 0px;
	right: 0px;
	}

	.input-field.suffix i.active {
	color: #26a69a;
	}

	.input-field.suffix input,
	.input-field.suffix textarea {
	margin-right: 3rem;
	width: 92%;
	width: calc(100% - 3rem);
	}

	.input-field.suffix textarea {
	padding-top: .8rem;
	}

	.input-field.suffix label {
	margin-right: 3rem;
	}

	@media only screen and (max-width: 992px) {
	.input-field.suffix input {
	width: 86%;
	width: calc(100% - 3rem);
	}
	}

	@media only screen and (max-width: 600px) {
	.input-field.suffix input {
	width: 80%;
	width: calc(100% - 3rem);
	}
	}
	</style>
	</head>

	<body>
	<div class="container">
	<div class="row">
	<h1>Suffix demo</h1>
	</div>
	<div class="row">
	<form class="col s12">
	<div class="row">
	<div class="input-field suffix col s6">
	<input id="icon_prefix" type="text" class="validate">
	<label for="icon_prefix">First Name</label>
	<i class="material-icons">account_circle</i>
	</div>
	<div class="input-field col s6">
	<i class="material-icons prefix">phone</i>
	<input id="icon_telephone" type="tel" class="validate">
	<label for="icon_telephone">Telephone</label>
	</div>
	</div>
	<div class="row">
	<div class="input-field col s12">
	<input disabled value="I am not editable" id="disabled" type="text" class="validate">
	<label for="disabled">Disabled</label>
	</div>
	</div>
	</form>
	</div>
	</div>
	<!--Import jQuery before materialize.js-->
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="js/materialize.min.js"></script>
	</body>

	</html>