I amm trying that the tomato color stripes in the columns are aligned at the top of each column, the left column is applied the property justify-content: center;
and flex-direction: column;
I have tried to align itself from the start using justify-self: flex-start;
or align-self: flex-start;
but neither achieves the effect I want.
Here the relevant section
Column
.one {
display: flex;
flex-direction: column;
justify-content: center;
}
The css for the element that I requires moving to the top
.mark {
background-color: tomato;
min-height: 50px;
width: 100%;
/* justify-self: flex-start; */
align-self: flex-start;
}
Please take a look to the current state
#app {
display: flex;
}
.one, .two {
flex: 1
}
.one {
display: flex;
flex-direction: column;
justify-content: center;
}
.mark {
background-color: tomato;
min-height: 50px;
width: 100%;
justify-self: flex-start;
}
table {
border-collapse: collapse;
width: 100%;
}
table th, table td {
border: none;
padding: 10px;
}
table tbody > tr:nth-child(2n) > td, table tbody > tr:nth-child(2n) > th {
background-color: #fff7db;
}
table tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th {
background-color: #e5e6f3;
}
table th {
height: 50px;
}
.collection {
background-color: tomato;
}
<div id="app">
<div class="one">
<div class="mark"></div>
<h1>Text</h1>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="two">
<table>
<thead>
<tr>
<th colspan="3" class="collection">Collection</th>
<th>A</th>
<th>B</th>
<th>C</th>
</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
Thank you for your advices
Text
Lorem ipsum dolor sit amet consectetur.