tranga-website/Website/styles/notificationConnector.css

.NotificationConnectorItem{
    position: relative;
    display: grid;
    width: calc(100% - 10px);
    grid-template-columns: 40% calc(60% - 10px);
    margin: 0 auto;
    padding: 5px;
    border-radius: 5px;
    grid-template-rows: 30px 30px auto 30px;
    column-gap: 4px;
    row-gap: 4px;
    grid-template-areas:
        "name name"
        "url explanation "
        "headers body"
        "footer footer";
    align-items: center;
    border: 1px solid var(--primary-color);
}

.NotificationConnectorItem p{
    margin: 0;
}

.NotificationConnectorItem-Name{
    grid-area: name;
    justify-self: flex-start;
}

.NotificationConnectorItem-Url{
    grid-area: url;
}

.NotificationConnectorItem-Body{
    grid-area: body;
    width: calc(100% - 2px);
    height: max-content;
    min-height: 100%;
    padding: 0;
    margin: 0;
    resize: vertical;
}

.NotificationConnectorItem-Explanation{
    grid-area: explanation;
    align-self: flex-end;
}

.NotificationConnectorItem-Headers{
    grid-area: headers;
    justify-self: flex-end;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
}
.NotificationConnectorItem-Header {
    display: flex;
    flex-direction: row;
}

.NotificationConnectorItem-Header > input {
    width: 48%;
}

.NotificationConnectorItem-Save{
    grid-area: footer;
    justify-self: flex-end;
    padding: 0 15px;
}