JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<div class="item">
  <div class="favicon"></div>
  <div class="title">Jeffrey is a word with ascenders and descenders.</div>
</div>

CSS

.item {
  display: grid;
  grid-template-columns: min-content 1fr;
}
  
.favicon {
  width: 16px; 
  height: 16px;
  align-self: baseline;
}

.favicon {
	content: url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/+HDy//o0df/hw8u/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf/38PL//////4kTMv9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/li1I/5gxTP+BAyT/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
}

.title {
  display: inline-block;
}