[RbnJrg]

Originally Posted by ElMiko

Can you pair the "max content" in the first column with "fit content" in the second?

Yes, but I am not going to solve all of your issues

1. In your .css stylesheet:

.container {
  display: flex;
}

.col1 {
  display: inline-block;
  width: max-content;
  max-width: 45%;
  margin-right: 10px;
  white-space: nowrap;
  overflow: auto;
  text-overflow: clip;
  flex-shrink: 0;
}

.col2 {
  flex-grow: 1;
}

2. In your .xhtml file:

  <div class="container">
    <p class="col1">This is a line</p>

    <p class="col2">This is the text asociated to the tittle on the left column.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
  </div>

  <div class="container">
    <p class="col1">This is a quite long line of text</p>

    <p class="col2">This is the text asociated to the tittle on the left column.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
  </div>

This is a screenshot of the output:



As you can see, in this approach, the scroll bar is positioned in the first column, flush with the end of the second column. If you'd prefer the bar to be positioned below the line in the first column, you should use the following code:

1. In your .css stylesheet:

.container {
  display: flex;
}

.col1 {
  width: max-content;
  max-width: 45%;
  margin-right: 10px;
  flex-shrink: 0;
}

.scrollBox {
  white-space: nowrap;
  overflow: auto;
  text-overflow: clip;
  max-height: 2.4em;
}

.col2 {
  flex-grow: 1;
}

2. In your .xhtml file:

  <div class="container">
    <div class="col1">
      <p class="scrollBox">This is a line</p>
    </div>

    <p class="col2">This is the text asociated to the tittle on the left column.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
  </div>

  <div class="container">
    <div class="col1">
      <p class="scrollBox">This is a quite long line of text</p>
    </div>

    <p class="col2">This is the text asociated to the tittle on the left column.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
  </div>

Here you have a screenshoot of the output:



Of course, all this only under epub3 (and also is a sample of the power of css3 and epub3; achieving this under epub2 is unthinkable). Below I attach the respective epub.