JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div class="test-box">
		<div class='ul'>
			<div class='li'>Пункт 1</div>
			<div class='li' style="position: absolute; right: 0px;">Пункт 2</div>
			<div class='li'>Пункт 3</div>
			<div class='li'>Пункт 4</div>
			<div class='li'>Пункт 5</div>
			
		</div>
	</div>

CSS

.test-box {
		background: #F8F7EF; 
		border: 1px dashed #000;
		border-bottom: 1px dashed #000;
		
		margin: 10px auto 10px;
		padding: 10px 0;
		6width: 500px;
		
	}

		.test-box .ul {		
			margin: 0;
			padding: 0;
			list-style: none;
			
			
		
		}
	.test-width { 
		background: #E4C17D; 
		margin-top: 10px;
		text-align: center;
		padding: 5px 0;
		margin: 10px auto 10px;
	}
	/* CSS для примера */
	.test-box .ul {
		font: 14px Verdana, Geneva, sans-serif;
		text-align: center;


        display: -webkit-box; /* Android 4.3-, Safari без оптимизации */
        -webkit-box-pack: justify; /* Android 4.3-, Safari без оптимизации */
        display: -webkit-flex; /* оптимизация для Safari */
        -webkit-justify-content: space-between; /* оптимизация для Safari */
        display: flex;
        justify-content: space-between;
        text-align: justify; /* IE10-, Firefox 12-22 */
        text-align-last: justify; /* IE10-, Firefox 12-22 */

        /*text-justify: newspaper; /* IE7- */
        /*zoom: 1; /* IE7- */
	}


		.test-box .ul .li {
			display : inline-block;
			width : 100px;
			height: 100px;
			margin: 0 0 20px;
			background: #E76D13;
			vertical-align: top;
			text-align: center;

            display: -webkit-box; /* !хак! для Android 4.3-, должен идти после inline-block */



            /*display: inline;  /* IE7- */
            /*zoom: 1; /* IE7- */
        }