body { margin: 0; font-family: 'Segoe UI', Tahoma, sans-serif; } .Test header { background-color: #323639; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); padding: 20px; color: white; } .Test header h1 { font-size: inherit; margin: 0; } .Test__container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin: 10px 0; padding: 10px; } .Test__container > * > * { margin: 10px; } .Test__container__options { display: flex; flex-basis: 400px; flex-grow: 1; flex-wrap: wrap; margin: 0; } .Test__container__options input, .Test__container__options button { font: inherit; } .Test__container__options fieldset { border: 1px solid black; flex-grow: 1; position: relative; top: -10px; } .Test__container__options fieldset legend { font-weight: 600; } .Test__container__options fieldset legend + * { margin-top: 0 !important; } .Test__container__options fieldset label { font-weight: 600; display: block; } .Test__container__options fieldset label:not(:first-of-type) { margin-top: 1em; } .Test__container__options fieldset input[type='checkbox'] + label, .Test__container__options fieldset input[type='radio'] + label { font-weight: normal; display: inline-block; margin: 0; } .Test__container__options fieldset form:not(:first-child), .Test__container__options fieldset div:not(:first-child) { margin-top: 1em; } .Test__container__options fieldset form:not(:last-child), .Test__container__options fieldset div:not(:last-child) { margin-bottom: 1em; } .Test__container__content { display: flex; max-width: 100%; flex-basis: 420px; flex-direction: column; flex-grow: 100; align-items: stretch; } .Test__container__content__token { display: block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }