DEV Community

How to put 4 textarea side by side to fit page?

ivkeMilioner on December 07, 2019

Collapse
 
marianabeldi profile image
Mariana Beldi

In my opinion, the best way would be:
a container with display: flex
every textarea with flex-grow: 1

Collapse
 
itssimondev profile image
Simone Aronica

This is the answer!

Collapse
 
ivkemilioner profile image
ivkeMilioner

no

Collapse
 
sabbin profile image
Sabin Pandelovitch

The same way you put 4 div side by side. The simplest way is to set a width equal to 25% and give each of them float css prop with left as value... Also the container should have clear:both property

Collapse
 
xanderyzwich profile image
Corey McCarty

I'd probably class them together to make it easy as well

Collapse
 
sabbin profile image
Sabin Pandelovitch

Indeed, personally I would use flexbox but it would require to understand it

Collapse
 
itssimondev profile image
Simone Aronica

Though I find Mariana's answer the best, one other thing you might do is use a display: grid; on the parent element and then create two columns of the same width with template-columns: 1fr 1fr 1fr 1fr;

Collapse
 
sirchris profile image
Krzysztof Florkowski

Container with display: flex should be enough