The Design
Compiler

export default function App({ active }) {
  return (
    <div
      css={{
        display: "flex",
        flexDirection: "column",
        flexShrink: 0,
      }}
    >
      <span
        css={[
          {
            whiteSpace: "pre-wrap",
            margin: 0,
            cursor: "default",
            color: "white",
          },
          active && {
            color: "#8D6CEE",
          },
        ]}
      >
        Heading
      </span>
      <div
        css={{
          flex: "0 1 8px",
          "@media screen and (min-width: 960px)": {
            flex: "0 1 16px",
          },
        }}
      />
      <div
        css={{
          display: "flex",
          flexDirection: "column",
          flexShrink: 0,
          background: "#8D6CEE",
          "@media screen and (min-width: 960px)": {
            flexDirection: "row",
          },
        }}
      >
        <span
          css={{
            whiteSpace: "pre-wrap",
            margin: 0,
            cursor: "default",
            color: "white",
          }}
        >
          Content
        </span>
      </div>
    </div>
  );
}