Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="row">
- <div class="col">
- <form>
- <div class="row">
- <div class="col">
- <div class="label-column">
- <label>Label 1</label>
- <label>Label 2</label>
- <label>Label 3</label>
- </div>
- </div>
- <div class="col">
- <div class="content-column">
- <div>
- <p>{{contentForLabel1}}</p>
- </div>
- <br>
- <div>
- <p>{{contentForLabel2}}</p>
- </div>
- <br>
- <div>
- <p>{{contentForLabel3}}</p>
- </div>
- </div>
- </div>
- <div class="col">
- <label>Label 4</label>
- </div>
- <div class="col">
- <div class="content-area">
- <div>
- <div>
- <p
- style="font-weight: bold; color: grey"
- >Content displayed here in text with inline styling</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </form>
- form {
- background-color: white;
- margin-top: 30px;
- margin-bottom: 30px;
- justify-content: center;
- align-content: center;
- padding-bottom: 25px;
- width: 100%;
- }
- .form-area {
- margin-top: 30px;
- }
- label {
- display: block;
- color: black;
- font-weight: bold;
- }
- .label-column {
- padding-top: 25px;
- display: flex;
- display: inline-block;
- width: 80%;
- }
- .content-column {
- padding-top: 25px;
- display: flex;
- display: inline-block;
- width: 80%;
- }
- .content-area {
- padding-bottom: 25px;
- }
- LABEL 1 content text LABEL 4 more text
- with some more text and so on...
- more text
- LABEL 2 here starts the next and so on...
- content text more text
- and so on...
- LABEL 3 here starts the last
- line of content text.
- LABEL 4 more text
- LABEL 1 content text and so on...
- with some more text
- LABEL 2
- LABEL 3 here starts the next
- content text
- here starts the last
- line of content text
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement