Width

Element width.

html

<div class="wd-wrap" role="img" aria-label="An element's width set in pixels, percent of its container, or auto to fit content, aligned by the container's justify-content" data-mode="px" style="--wpx:60px;--wpct:60%;">
  <div class="wd-container" style="justify-content:flex-start;">
    <div class="wd-box" style="background:#A8E6C1;">box</div>
  </div>
  <p class="wd-caption">width: 60px &middot; justify-content: flex-start (container is 300px wide)</p>
</div>
<style>
.wd-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.wd-container { width: 300px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; display: flex; }
.wd-box { border-radius: 6px; padding: 12px 0; text-align: center; font-weight: 700; }
.wd-wrap[data-mode="px"] .wd-box { width: var(--wpx); }
.wd-wrap[data-mode="%"] .wd-box { width: var(--wpct); }
.wd-wrap[data-mode="auto"] .wd-box { width: auto; padding-left: 14px; padding-right: 14px; }
.wd-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="wd-tw font-sans text-[#241430] w-[300px]" role="img" aria-label="An element's width set in pixels, percent of its container, or auto to fit content, aligned by the container's justify-content" data-mode="px" style="--wpx:60px;--wpct:60%;">
  <div class="w-[300px] bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border flex" style="justify-content:flex-start;">
    <div class="wd-tw-box rounded-md py-3 text-center font-bold" style="background:#A8E6C1;">box</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">width: 60px &middot; justify-content: flex-start (container is 300px wide)</p>
</div>
<style>
.wd-tw[data-mode="px"] .wd-tw-box { width: var(--wpx); }
.wd-tw[data-mode="%"] .wd-tw-box { width: var(--wpct); }
.wd-tw[data-mode="auto"] .wd-tw-box { width: auto; padding-left: 14px; padding-right: 14px; }
</style>

react

export function WidthDemo({
  mode = "px",
  value = 60,
  align = "flex-start",
  background = "#A8E6C1",
}) {
  const boxWidth = mode === "auto" ? "auto" : `${value}${mode}`;
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}
      role="img" aria-label="An element's width set in pixels, percent of its container, or auto to fit content, aligned by the container's justify-content">
      <div style={{ width: 300, background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 10, boxSizing: "border-box", display: "flex", justifyContent: align }}>
        <div style={{ width: boxWidth, background, borderRadius: 6, padding: mode === "auto" ? "12px 14px" : "12px 0", textAlign: "center", fontWeight: 700 }}>
          box
        </div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>width: {value}{mode} &middot; justify-content: {align} (container is 300px wide)</p>
    </div>
  );
}