Как выровнять элементы в разных контейнерах?

Question

Как я могу выровнять мой заголовок по левому краю моего контейнера «Выровнено по правому краю»?Вот набросок того, чего я пытаюсь достичь:

Я использую flexbox и flex: 1 для создания 50/50раскладка.Я сейчас пытаюсь поставить название в нужном месте.Моей первой мыслью было поместить его в дочерний контейнер aligned-right, однако я не хочу, чтобы он расширялся в область aligned-left.

Выравнивает дочерние контейнеры по центральной линии с помощью flexbox.неправильный способ сделать это?

Вот скрипка, которой не хватает этого названия: https://jsfiddle.net/cwasdbo4/17/

Answer 1

Попробуйте этот простой пример, используя CSS flex

var off=$('#box-left').position().left-9;

$('.header > span').css('left',off+'px');

.main{
  width:100%;
  border:1px solid #000;     
}

.main .header{
   text-align:center;
}

.main .header span{
  display:flex;
  position: relative;
}

.main .container{
  width:100%;  
  display:flex;  
}

.main .container .box-section{
  width:50%; 
  height:130px;
   display:flex;
   background:#eff0f1;
  border:1px solid #000;
}

.main .container .box-section.box-right{ 
  justify-content:flex-end;
}

.main .container .box-section.box-left{ 
  justify-content:flex-start; 
}



.main .container .box-section.box-right .box{ 
  justify-content:flex-end;
  width:150px; 
  height:100%;  
  background:#0095ff;
}

.main .container .box-section.box-left .box{ 
  justify-content:flex-start; 
  width:120px; 
  height:100%;
  position:relative;
  background:#0095ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="header">
       <span> Main title here</span>
  </div>
  <div class="container">
      <div class="box-section box-right">
        <div class="box" id="box-left"></div>
      </div>
      <div class="box-section box-left">
        <div class="box"></div>
      </div>
  </div>
</div>

Answer 2

Вы можете поместить контейнер .title в контейнер .aligned-right и добавить (согласно вашему примеру с скрипкой):

    .title {
      margin-top:-20px;
      position:relative;
      width:200%; //or white-space:nowrap;
    }
    .parent-container {
      margin-top:40px;
    }

, но он не будет работать для длинных заголовков с двумя и более строками (илиесли вы добавляете контент динамически) и абсолютно беспомощен для относительного макета.