html – I want columns in a row without line break (flexbox)

So my problem is that I created two columns along with the WordPress Gutenberg editor and I Column text 1 To the left of the block group I have created and Column text 2 On the right.

However Column text 2 When I resize a small screen, the line breaks on the second line. Is there a way to keep two column texts in the same row no matter how small the screen size?

Here is a simple version of my code with html and css:

https://jsfiddle.net/1ac92xhu/

HTML:


    <div class="wp-block-columns">
    <div class="wp-block-column  column-1" style="flex-basis:80%">
    <p>Column text1</p>
    </div>
    <div class="wp-block-column column-2 style="flex-basis:20%">
    <p>Column text 2</p>
    </div>

CSS:

  .column-1 {
  
    display: flex;
    justify-content: flex-start;
    flex-basis: 80%;
    padding-left: 0.5rem;
  }

  .column-2 {

    break-inside: avoid-column;
    display: flex;
    justify-content: right;
    flex-wrap: nowrap;
    text-transform: uppercase;
    padding-right: 1rem;
  }

Write a Comment