How to make 2 cells independent from each other in height in CSS?

Question

I am trying to make a list of services of my business. I imagined two cells on a 16:9 monitor to look like this.

I wanted to do this with a table in HTML:

<table style="width:100%">
  <tr>
    <th>service</th>
    <th>service</th>
  </tr>
  <tr>
    <td>text text text </td>
    <td>text</td>
  </tr>
  <tr>
    <th>service</th>
    <th>service</th>
  </tr>
  <tr>
    <td>text text text text</td>
    <td>text text</td>
  </tr>
</table>

This does work but the longer texts on the right side stop at the beginning of the next service title on the left side. I would like to have the left cell independent from the right.

How could I solve this problem?

is you requirement ok to use `div`? if so use `flex` or `grid`, which is best for this use case. — Manjuboyz, Jun 26 '20 at 14:57
Are you actually using tables for tabular data? Your "imagination" shows a layout, but your example shows tabular data. The former is not a good use of the `table` element, but the latter is. — Heretic Monkey, Jun 26 '20 at 14:59
@HereticMonkey I used that as a "trick". What better way to do it? — antonrave, Jun 26 '20 at 15:01
@Manjuboyz I have no requirements. You could write an answer explaining flex and grid if you want to. That would be great! — antonrave, Jun 26 '20 at 15:02
There are many questions and answers on Stack Overflow about how to create two-column layouts using CSS without tables. — Heretic Monkey, Jun 26 '20 at 15:08
Does this answer your question? [How to make a stable two column layout in HTML/CSS](https://stackoverflow.com/questions/5573855/how-to-make-a-stable-two-column-layout-in-html-css) — Heretic Monkey, Jun 26 '20 at 15:08

score 1 · Accepted Answer · answered Jun 26 '20 at 15:08

You can begin with this:

fiddle to playaround.

.MainDiv {
  height: 800px;
  width: 100%;
  border: 1px solid red;
  display: flex;
  padding: 10px;
}

.leftDiv {
  height: 800px;
  width: 50%;
  border: 1px solid blue;
  margin: 10px;
}

.rightDiv {
  height: 800px;
  width: 50%;
  border: 1px solid blue;
  margin: 10px;
}

<div class="MainDiv">

  <div class="leftDiv">
    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left

    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
    left left left left left left left


    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
  </div>
  <div class="rightDiv">
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    Right right right right right right
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
  </div>
</div>

How to make 2 cells independent from each other in height in CSS?

1 Answers1