JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder">
    <!-- grid -->
    <div class="yjsg-row">
        <div class="yjsg-col-1">	<span>yjsg-col-1</span>

            <p>Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.</p>
        </div>
    </div>
    <!-- grid -->
    <div class="yjsg-row">
        <div class="yjsg-col-1-2">	<span>yjsg-col-1-2</span>

            <p>Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.</p>
        </div>
        <div class="yjsg-col-1-2">	<span>yjsg-col-1-2</span>

            <p>Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.</p>
        </div>
    </div>
    <!-- grid -->
    <div class="yjsg-row">
        <div class="yjsg-col-1-3">	<span>yjsg-col-1-3</span>

            <p>Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.</p>
        </div>
        <div class="yjsg-col-1-3">	<span>yjsg-col-1-3</span>

            <p>Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.</p>
        </div>
        <div class="yjsg-col-1-3">	<span>yjsg-col-1-3</span>

            <p>Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.</p>
        </div>
    </div>
    <!-- grid -->
    <div class="yjsg-row">
        <div class="yjsg-col-1-4">	<span>1/4</span>

            <p>Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure...

CSS

.holder {
    display:block;
    margin:0 auto;
    width:auto;
}
.yjsg-row {
    display: block;
    margin:0 auto;
    height: auto;
    width: auto;
    padding: 15px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.yjsg-row:before, .yjsg-row:after {
    display:table;
    content:"";
    clear:both;
}
[class*='yjsg-col-'] {
    display:block;
    float:left;
    margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
[class*='yjsg-col-'] {
    padding-left:15px;
    padding-right:15px;
}
.yjsg-col-1 {
    width:100%;
}
.yjsg-col-1-2 {
    width: 50%;
}
.yjsg-col-1-3 {
    width:33.33333333333333%;
}
.yjsg-col-1-4 {
    width: 25%;
}
.yjsg-col-1-5 {
    width:20%;
}
.yjsg-col-1-6 {
    width:16.66666666666667%;
}
.yjsg-col-1-8 {
    width: 12.5%;
}
@media screen and (max-width: 979px) {

    [class*='yjsg-col-'] {
        width: 50%;
    }
    .yjsg-col-1 {
        width:100%;
    }
}
@media screen and (max-width: 719px) {
    [class*='yjsg-col-'] {
        width: 100%;
    }
}