Edit in JSFiddle

<div class="wrap">
    <div class="row">
        <label>NO.</label>
        <div>&nbsp;</div>
        <label>日付</label>
        <div>&nbsp;</div>
    </div>

    <div class="row">
        <label>氏名</label>
        <div>&nbsp;</div>
    </div>

    <div class="row">
        <label>摘要</label>
        <div>&nbsp;</div>
        <label>金額</label>
        <div>&nbsp;</div>
    </div>

    <div class="row">
        <label>備考</label>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
    </div>
</div>

.wrap {
    width: 100%;
    min-width: 550px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.wrap * {
    box-sizing: border-box;
}

.row {
    display: flex;
    align-items: center;
    width: 100%;
}
.row > * {
    min-height: 3rem;
    padding: .25rem;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.row > label {
    width: 10%;
    white-space: nowrap;
    font-weight: 700;
}

.row > div {
    background-color: yellow;
    width: 90%;
}


/* 最初の行 */
.row:first-child > div:first-of-type {
    width: 20%;
}
.row:first-child > div:last-of-type {
    width: 60%;
}

/* 3行目 */
.row:nth-child(3) > div:first-of-type {
    width: 50%;
}
.row:nth-child(3) > div:last-of-type {
    width: 30%;
}

/* 最後の行 */
.row:last-child > * {
    min-height: 7rem;    
}
.row:last-child > div {
    width: 15%;
}
.row:last-child > div:first-of-type {
    width: 60%;
}
.row:last-child > div:not(:first-of-type) {
    background-color: transparent;
}