Trying to create a view using css flexbox, combining row and columns - html

Question

I am trying to create the layout shown in the diagram below with css flex, I am part way there but need to help with the 3 boxes on the right and the box on the bottom, can anyone help?
layout view needed:
this is how far i got: my attempt on the view on jsfiddle
.game-heading{background: #a3a3a3;}
header{
display: flex;
}
article{
display: flex;
}
.scores {
display: flex;
flex-wrap: wrap;
flex: 1;
line-height: 1;
}
.period {
background: #c29d31;
padding: 5px 10px;
text-align: center;
}
.results{
display: flex;
flex-direction: column;
}
.score-nr {
background: #9E8231;
flex: 1;
line-height: 10px;
padding: 6px;
}
.competitors{
color: #2d2929;
flex-direction: row;
align-items: flex-start;
float: left;
flex-grow: 0;
}
.fa {
align-self: center;
padding: 10px;
}
.venue-content{
background: #a3a3a3;
width: 100%
}
h4{
display: inline-flex;
}
.competitor-name {
padding: 4px;
}
ul li{
padding: 5px 10px;
border: 1px solid #808080;
}

Answer 1

Here is a start, where I moved the ft-container inside the header, positioned before the venue-content.
Then, by splitting the ul into to 2 ul, you can easily line them up side-by-side, adding display: flex to the ft-container.
Updated fiddle
Stack snippet
body {
font-size: 12px;
}
.game-heading {
background: #a3a3a3;
}
header {
display: flex;
}
article {
display: flex;
}
.scores {
display: flex;
flex-wrap: wrap;
flex: 1;
line-height: 1;
}
.period {
background: #c29d31;
padding: 5px 10px;
text-align: center;
}
.results {
display: flex;
flex-direction: column;
}
.score-nr {
background: #9E8231;
flex: 1;
line-height: 10px;
padding: 6px;
}
.competitors {
color: #2d2929;
flex-direction: row;
align-items: flex-start;
float: left;
flex-grow: 1;
}
.fa {
align-self: center;
padding: 10px;
}
.venue-content {
background: #a3a3a3;
width: 100%
}
h4 {
display: inline-flex;
}
.competitor-name {
padding: 4px;
}
/* styles below have been changed/added */
ul li {
padding: 5px 10px;
}
ul {
border: 1px solid #808080;
}
.ft-container {
display: flex;
}
.ft-container ul:last-child {
display: flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<section class="container-one-row two">
<h3 class="game-heading">game type </h3>
<article class="game-content">
<header class="event-title">
<div class="scores">
<span class="period">Time</span>
<div class="results">
<span class="score-nr">5122</span>
<span class="score-nr">8213</span>
</div>
<div class="competitors">
<h3 class="competitor-name">jimmy1234</h3>
<h3 class="competitor-name">player98763</h3>
</div>
<i class="fa fa-arrow-right"></i>
<section class="ft-container">
<ul>
<li>222
</li>
<li>543
</li>
</ul>
<ul>
<li>mid
</li>
</ul>
</section>
<div class="venue-content">
<h4>Neutral</h4>
<i class=" fa fa-gamepad"></i>
</div>
</div>
</header>
</article>
</section>
Updated based on a comment saying, can't move the ft-container's markup
Then you needed to use absolute positioning, to position the ft-container at the right, and match its height against the competitors, which in itself need to match the ft-container and arrow to avoid a wrap.
Updated fiddle
Stack snippet
body {
font-size: 12px;
}
.game-heading {
background: #a3a3a3;
}
header {
display: flex;
flex: 1;
}
article {
position: relative;
display: flex;
}
.scores {
display: flex;
flex-wrap: wrap;
flex: 1;
line-height: 1;
}
.period {
background: #c29d31;
padding: 5px 10px;
text-align: center;
}
.results {
display: flex;
flex-direction: column;
}
.score-nr {
background: #9E8231;
flex: 1;
line-height: 10px;
padding: 6px;
}
.competitors {
color: #2d2929;
flex-direction: row;
align-items: flex-start;
width: calc(100% - 200px);
}
.fa {
align-self: center;
padding: 10px;
}
.venue-content {
background: #a3a3a3;
width: 100%;
}
h4 {
display: inline-flex;
}
.competitor-name {
padding: 4px;
}
ul li {
padding: 5px 10px;
}
ul {
border: 1px solid #808080;
}
.ft-container {
position: absolute;
right: 0;
top: 0;
height: 44px;
display: flex;
}
.ft-container ul:last-child {
display: flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<section class="container-one-row two">
<h3 class="game-heading">game type </h3>
<article class="game-content">
<header class="event-title">
<div class="scores">
<span class="period">Time</span>
<div class="results">
<span class="score-nr">5122</span>
<span class="score-nr">8213</span>
</div>
<div class="competitors">
<h3 class="competitor-name">jimmy1234</h3>
<h3 class="competitor-name">player98763</h3>
</div>
<i class="fa fa-arrow-right"></i>
<div class="venue-content">
<h4>Neutral</h4>
<i class=" fa fa-gamepad"></i>
</div>
</div>
</header>
<section class="ft-container">
<ul>
<li>222
</li>
<li>543
</li>
</ul>
<ul>
<li>mid
</li>
</ul>
</section>
</article>
</section>