css-layout-test-1

by Richard Hunter

HTML

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore </p>
    <p>My aim in writing CSS code is to style components so that they can be combined with other components without having to write any additional code. For example, if I create a button, and a paragraph component, I can combine these together in a container simply by writing their html tags, and all alignment and spacing will just work.</p>
    <div class="button-container">
      <button>alpha</button><button>beta</button>
    </div>
  
</div>

CSS

.container {
  background: pink;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

p {
  border: solid 1px blueviolet;
  padding: 4px;
  line-height: 24px;
  margin: 4px;
  background: lightblue;
}

.button-container {
  display: flex;
  background: aliceblue;

  flex-direction: row;
  justify-content: flex-end;
}

button {
  -webkit-appearance: none;
  border: 1px solid red;
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 4px;
}