<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin
=
"anonymous"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1.0"
/>
<
style
>
form {
margin: 40px;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
strong
>Pure CSS Forms Input Sizing</
strong
>
</
center
>
<
form
class
=
"pure-form pure-g"
>
<
div
class
=
"pure-u-1-4"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-1-4"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-3-4"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-3-4"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-1-2"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-1-2"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-1-2"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-1-2"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-1-8"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-1-8"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-1-8"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-1-8"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-1-4"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-1-4"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-1-2"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-1-2"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-1-5"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-1-5"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-2-5"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-2-5"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-2-5"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-2-5"
/>
</
div
>
<
br
><
br
>
<
div
class
=
"pure-u-1"
>
<
input
type
=
"text"
class
=
"pure-input-1"
placeholder
=
"Pure-u-1"
/>
</
div
>
</
form
>
</
body
>
</
html
>