JSFiddle - React, Tailwind, and code Playground

by funato

HTML

<article>

<h2>かかかかかか</h2>
<p id="pink">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<h2>きききききいき</h2>
<p id="orange">おおおおおおおおおおおおおおおお</p>

</article>



<ul>
    <li id="red">ああああ</li>
    <li id="blue">いいい</li>
    <li id="green">ううう</li>
    <li id="orange">えええ</li>
    <li id="pink">おおおお</li>
  </ul>



<div class="container">
<div class="column01">
<p>あああああああああああああああああああああ</p>
</div>
<div class="column02">
<p>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</p>
</div>
<div class="column03">
<p>いいいいいいいいいいいいいいいいいいいいいい</p>
</div>

CSS

article{
	width:600px;
	margin:auto;
    -webkit-column-width:190px;
	-moz-column-width:190px;
	column-width:190px;
    -webkit-column-gap:10px;
    -moz-column-gap:10px;
    column-gap:10px;
    background-color:#ff0000;
    column-rule: solid 2px greenyellow;
    -webkit-column-rule: solid 2px greenyellow;
    -moz-column-rule: solid 2px greenyellow;
	}



ul{
	border:dotted 2px blue;
	display: -webkit-flex;
	display: -moz-flex;
	display:flex;
	-webkit-flex-direction: row-reverse;
	-moz-flex-direction: row-reverse;
	flex-direction: row-reverse;
    -webkit-flex-wrap: wrap;
    flex-wrap:wrap;
    list-style:none;
}
li{width:120px;
padding:20px 0;
text-align:center;
}

#red{
    background-color:red;
}
#blue{
    background-color:blue;
}
#green{
    background-color:green;
}
#orange{
    background-color:orange;
}
#pink{
    background-color:pink;
}
.container{
    border:dotted 2px blue;
    display:-webkit-box;
    display:-moz-box;
	display:box;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-align-items: center;
    -moz--align-items: center;
    -align-items: center;
    
    
    
}
.column01{
    width:100px;
		background-color:orange;
    -webkit-order: 2;
    -moz-order: 2;
    order: 2;
    -moz-box-ordinal-group:2;
	}
.column02{
    background-color:greenyellow;
    
    width:100px;
    -webkit-order: 3;
    -moz-order: 3;
    order: 3;
    -moz-box-ordinal-group:3;
	}

.column03{
    width:100px;
		background-color:pink;
    -webkit-order: 1;
    -moz-order: 1;
    order: 1;
    -moz-box-ordinal-group:1;
	}