There is a div, inside which there are two other divs, one with the date, the other (longer) with the text of the news. How to make a div with a date and text lie on one line, and so that when the width of the parent div decreases, the div with text changes the height, but does not jump to a new line below the diva with the date?
The example below, it uses Bootstrap, expand to full screen to understand what I'm talking about. https://jsfiddle.net/sfr38qps/4/
/* line 415, ../scss/base/_base.scss */ #news1, #news2, #news3 { margin-top: 30px; } /* line 417, ../scss/base/_base.scss */ #news1 .newsMain, #news2 .newsMain, #news3 .newsMain { font-family: BEBAS; font-size: 25px; margin-top: 0px; margin-bottom: 43px; } /* line 424, ../scss/base/_base.scss */ #news1 .date, #news2 .date, #news3 .date { position: relative; width: 56px; height: 31px; background: #edd27d; float: left; margin-right: 20px; font-size: 11px; font-family: Arial Regular; text-align: center; display: inline-block; } /* line 437, ../scss/base/_base.scss */ #news1 .date span, #news2 .date span, #news3 .date span { vertical-align: middle; line-height: normal; } /* line 443, ../scss/base/_base.scss */ #news1 .date:after, #news2 .date:after, #news3 .date:after { content: ''; position: absolute; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 16px solid transparent; border-left: 21px solid #edd27d; right: -21px; top: 0px; } /* line 455, ../scss/base/_base.scss */ #news1 .text, #news2 .text, #news3 .text { clear: left; display: inline-block; margin-left: 14px; } /* line 459, ../scss/base/_base.scss */ #news1 .text h1, #news2 .text h1, #news3 .text h1 { margin-top: 0; color: #c6251a; font-size: 15px; } /* line 464, ../scss/base/_base.scss */ #news1 .text p, #news2 .text p, #news3 .text p { font-size: 13px; font-family: Arial Regular; } /* line 469, ../scss/base/_base.scss */ #news1 .text .link, #news2 .text .link, #news3 .text .link { float: left; } /* line 473, ../scss/base/_base.scss */ #news1 .text .link a, #news2 .text .link a, #news3 .text .link a { font-family: Arial Regular; color: #c6251a; text-decoration: none; display: inline; float: left; } /*MODULES - individual site components */ /*LAYOUTS - Page layout styles */ <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <section class="section-about-news"> <div class="container"> <div class="row"> <div class="col-md-6" id="news">Left block</div> <div class="col-md-6" id="news"> <div id="news1"> <h1 class="newsMain">lastest news</h1> <div class="date"><span>23.12.10 <br> FRIDAY</span></div> <div class="text"><h1>Lorem ipsum dolor sit amet, consectetur</h1> <p>Donec turpis neque, sodales a faucibus at, viverra luctus urna. Suspendisse dignissim neque dui, in tincidunt ...</p> <a href="#">Read More</a> <i class="fa fa-long-arrow-right" aria-hidden="true"></i> </div> </div> </div> </div> </div> </section> 
