JSFiddle - React, Tailwind, and code Playground

HTML

<div class="line-wrapper">
    <div class="column1">How to make that of 100% of its parent line-wrapper?</div>
    <div class="column2">Random contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom contentRandom content</div>
</div>

CSS

.line-wrapper {
    font-size:0;  /* CANNOT CHANGE : For no space between inline-blocks */
    position:relative; /* Tried to get the 100% working, but it fails*/
    display:table-row;
}

.line-wrapper > div {
    font-size:14px; /* CANNOT CHANGE : For no space between inline-blocks */
    display:table-cell; /* CANNOT CHANGE : NO float allowed */
    vertical-align:top;
}

.column1 {
    width:30%; /* CANNOT CHANGE */
     /* <-- Expected to work (should be of the size of .line-wrapper), but it does not */
}
.column2 {
    width:60%;  /* CANNOT CHANGE */
}

/* Unuseful code, just to show a few colors */
.column1 {
    background-color:rgba(0,255,255,0.2);
}
.column2 {
    background-color:rgba(150,200,60,0.2);}
}

JavaScript

/*
    Note that: the line-wrapper cannot set its own height.
    It needs to be compatible IE9+, and latests versions of Chrome and Firefox.
*/