<style>
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 5px;
width: 50%;
border: solid black 1px;
}
td.no_border {
border: none;
}
td.bottom_border {
border-bottom: solid black 1px;
}
</style>
<body>
<table>
<tr>
<td class="no_border bottom_border"></td>
<td>R1:C2</td>
</tr>
<tr>
<td colspan="2">R2:C1</td>
</tr>
</table>
</body>/// _debug.scss
* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }<style>
.test {
position: relative;
width: 100px;
height: 20px;
outline: 1px solid red;
transition: all 2s linear;
}
.more {
position: absolute;
bottom: 0;
left: 45px;
color: blue;
transition: all 2s linear;
}
.test:hover {
height: 80px;
}
.test:hover > .more {
transform: rotate(180deg);
}
</style>
<body>
<div class="test">
<span class="more">↓</span>
</div>
</body>h1 {
text-align: left;
}
h3 {
text-align: right;
}
.parent-div {
position: relative;
...
}
.logo-div {
position: absolute;
top: 10px;
left: 0px;
...
}
.header-div {
position: absolute;
width: auto;
bottom: 10px;
left: 0px;
...
}