Items in one row but in different blocks-CodePudding

Have a little issue to force items to be in one row without a table.
For example I have like this:
Problem is if somehow long text in left block has word break (because of screen width, maybe), then two columns will not match. I know it is easy to do with table, but is there another way to do it flexible?

html

<div >
     <div >
        <ul>
           <li>Lorem ipsum dolor sit amet.:</li>
           <li>Lorem ipsum dolor sit amet.:</li>
           <li>Lorem ipsum dolor sit amet.:</li>
           <li>Lorem ipsum dolor sit amet.:</li>
        </ul>
     </div>
     <div ></div>
     <div >
        <ul>
           <li>item1</li>
           <li>item2</li>
           <li>item3</li>
           <li>item4</li>
        </ul>
     </div>

css

    .data {
        font-size: 15pt;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 25px 0;
    }

    .data__name {
        color: #666666;
        -webkit-box-flex: 0;
        -ms-flex: 0 40%;
        flex: 0 40%;
    }

    .data__line {
        border-left: 2px solid gray;
    }

    .data__info {
        font-weight: bold;
        margin-left: 5%;
        white-space: nowrap;
    }

CodePudding user response：

you can use word-break: break-word; on li element to wrap text inside component if text is too long

.data {
  font-size: 15pt;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 25px 0;
}

.data__name {
  color: #666666;
  -webkit-box-flex: 0;
  -ms-flex: 0 40%;
  flex: 0 40%;
}

.data__name li {
  word-break: break-word;
}

.data__line {
  border-left: 2px solid gray;
}

.data__info {
  font-weight: bold;
  margin-left: 5%;
  white-space: nowrap;
}

<div >
  <div >
    <ul>
      <li>Lorem ipsum dolorvvvvvvvvvvvv sit amet.:</li>
      <li>Lorem ipsum dolor sit amet.vvvvvvvvvvvvvvvvvvv:</li>
      <li>Lorem ipsum dolor sit amet.:</li>
      <li>Lorem ipsum dolor sit amet.:</li>
    </ul>
  </div>
  <div ></div>
  <div >
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </div>

CodePudding user response：

Add flex-wrap: wrap; for the items