JSFiddle - React, Tailwind, and code Playground

by bloodyowl

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flexbox in button">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button class="button">
    foo
    <span>bar</span>
    <div>baz</div>
  </button>
  <br />
  <div class="button" tabindex=0>
    foo
    <span>bar</span>
    <div>baz</div>
  </div>
</body>
</html>

CSS

.button {
    all: unset;
    appearance: none;
    -webkit-appearance: none;

    border: 1px solid;
    height: 100px;
    width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}