Break text on the left before breaking float on the next line

Question

I have a code like this: https://jsfiddle.net/qchtngzf/1/

and now, when the browser is too narrow, the div.right (the text on the right) jumps onto a next line. I would like to, however, if the div.left (the text on the left) would get smaller and the text inside would break onto a next line and the div.right would stay in the same place instead.

I found a similar issue here: Making a div float left, but not "fall" if text is too long but it's a little different and doesn't work for me even with some changes I tried.

Thank you.

Answer 1

You should set width for both of them right and left class:

html, body, header, nav, footer, div, p, ul, li, a {
 margin: 0;
 padding: 0;
 text-decoration: none;
 font-family: sans-serif;
 font-size: 18px;
}
.left {
  width: 80%;
  float: left;
  position: relative;
} 
.right {
  width: 10%;
}
.clearfix:after {
 content: "";
 display: block;
  clear: both;
}

hr {
 border: 0;
 height: 1px;
 background-color: #e9e9e9;
 margin: 16px 0;
}

section.body {
 max-width: 960px;
 min-width: 272px;
}

div.left {
 color: #1e344c;
 float: left;
}

div.left span {
 font-size: 14px;
 color: #666666;
}

div.right {
 float: right;
}

<section class="body">
  <div class="item clearfix">
   <div class="left">
    text text text text text text text text text text text text text text 
   </div>
   <div class="right">text </div>
  </div>
  <hr>
  <div class="item clearfix">
   <div class="left">
    text text text text text text text text text text <br>
    <span>text text text text text </span>
   </div>
   <div class="right">text </div>
  </div>
  <hr>
  <div class="item clearfix">
   <div class="left">
    text text text text text text text text text 
   </div>
   <div class="right">text </div>
  </div>
  <hr>
  <div class="item clearfix">
   <div class="left">
    text text text text text <br>
    <span>text text text text text text text text text text text text text text text </span>
   </div>
   <div class="right">text </div>
  </div>
  <hr>
  <div class="item clearfix">
   <div class="left">
    text text text text text text text <br>
    <span>text text text text text text text </span>
   </div>
   <div class="right">text </div>
  </div>
  <hr>
  <div class="item clearfix">
   <div class="left">
    text text text text text text text text text <br>
    <span>text text text text text text </span>
   </div>
   <div class="right">text </div>
  </div>
 </section>

Answer 2

You can use below css if you want right section not to wrap in next line and left section to get shorter.

html, body, header, nav, footer, div, p, ul, li, a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 18px;
}


.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

hr {
    border: 0;
    height: 1px;
    background-color: #e9e9e9;
    margin: 16px 0;
}

section.body {
    max-width: 960px;
    min-width: 272px;
}

div.left {
    color: #1e344c;
  width
}
.item {
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
div.left span {
    font-size: 14px;
    color: #666666;
}

div.right {
    white-space:nowrap;
}

Answer 3

1) Set width for both divs

2)set font size in "vh"

3) No need to set position:relative; of div.left;

div.left{
width:90%;
font-size:2vh;
float:left;
}
div.right{
width:10%;
float:right;
}

Answer 4

Actually, a combination of these answers helped. There is a problem with the one from Teuta (https://stackoverflow.com/a/38073935/6522717) that if the screen is too small and the content on the right is bigger than the set percentage, the text then breaks onto another line. This would be solved by another @media width or, as San posted (https://stackoverflow.com/a/38074311/6522717), by assigning white-space: nowrap to the div.right.

Thank you very much for the answers as they helped a lot.