The original work included a request for two bottom contact actions of the same size, reusable beyond one design. I developed a new component that isolates the geometry requirement. It applies common presentation to existing controls rather than copying their contact values and behavior.
The public example’s anchor moves to a sample section in the same document, and its button only counts interactions. It performs no registration or delivery. Labels and available width can change while the original elements and click functions remain visible in the inspection result. This package is independently authored CSS and an inspector, not customer code or assets extracted from the archive.
Let different labels occupy equal tracks
A parent with data-equal-actions uses content-based width capped by its container. Direct anchors and buttons occupy equal tracks and stretch to the same height. Instead of assigning an individually narrow frame to the shorter label, the two controls share one frame rule. A span can hold the text, with wrapping permitted.
Long unbroken strings can wrap as well. In narrow space the actions can grow taller; the implementation does not truncate accepted text to disguise a layout failure. The default minimum is44CSSpixels. That value alone does not certify contrast or all accessibility requirements. Geometry and actual operating conditions need separate inspection.
Leave the action and brand colors with their existing owner
The CSS does not write destinations or attach events. The example page owns its existing click functions and reports whether those function identities survive label and presentation changes. The demo page’s existing link handler cancels the default navigation and scrolls its own sample region. The presentation CSS does not replace that handler. No new registration route or contact value is added through the component.
The controls also retain their own background and text-color rules. Presentation does change: display, inherited font, line-height, padding and focus outline form part of the geometry contract. Integration needs review of inherited fixed widths, no-wrap rules and stronger selectors. This is an intentional presentation change, not a promise that existing styling is untouched.
An about:srcdoc base allowed fragment navigation in the temporary prototype, but the actual public execution region forbids base declarations through its security policy. The public check found the anchor resolving against the outer page. I kept that restriction and adapted the demo owner’s existing handler to scroll its own material instead. This is an example-specific action, not a feature of the geometry component that rewrites links or events. The difference explains why a temporary view and the exact public sandbox require separate checks.
Do not reserve another column for an unavailable action
An action marked hidden is excluded from the tracks. One actual action uses one frame rather than creating a second feature. The inspector reports zero when no action is visible. Equality can be mathematically true for empty or single-element groups, so a passing equality value alone does not establish that all required actions exist.
This example’s contract concerns text labels. Icons and images need additional sizing and wrapping inspection. Fixed positioning, reading clearance below the page and hide-on-scroll motion remain outside this CSS. Integration with an existing reading component should assign each changed property to its proper owner rather than let two programs replace the same transform.
Download the presentation code and read-only inspector
The ZIP contains CSS, a read-only inspector, Korean and English demos, isolated checks and usage guidance. The inspector reads current rectangles and visible count to report equal width and height, horizontal containment, minimum height and element scroll clipping. It neither changes controls nor sends their contents elsewhere. The integrating site decides how to consume the result.
The default tolerance is one CSSpixel and can be set from zero to four. A larger tolerance does not change the underlying rectangles. These numerical checks also do not establish meaning, contrast or server receiving and delivery. Keeping that boundary small makes the result interpretable when the same component is adapted to another project.
Explore the implementation
New independent CSS · equal text-action frames
[data-equal-actions] {
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
align-items: stretch;
gap: var(--equal-action-gap, 8px);
width: max-content;
max-width: 100%;
box-sizing: border-box;
}
[data-equal-actions] > :is(a, button) {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 0;
min-height: 44px;
margin: 0;
padding: var(--equal-action-padding, 10px 16px);
font: inherit;
line-height: 1.45;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}
[data-equal-actions] > :is(a, button) > span {
min-width: 0;
overflow-wrap: anywhere;
}
[data-equal-actions] > [hidden] { display: none !important; }
[data-equal-actions] > :is(a, button):focus-visible {
outline: 3px solid var(--equal-action-focus, #956523);
outline-offset: 3px;
}
Use numerical checks and observed layout for different questions
Eighteen isolated checks use synthetic rectangle fixtures to exercise the inspector’s calculations and rejection conditions. They cover unequal widths and heights, clipping, hidden actions, invalid input and read-only preservation. They do not show how a browser lays out CSS. Wide and narrow public examples and native keyboard behavior require a separate actual-browser check.
After integration, inspect long labels, a single remaining action and a container that becomes narrow, then verify the original link and handler. Taller labels also require inspection of any fixed bar that could cover necessary text. The shared package is a small frame rule and an inspection tool. It does not claim to complete the website’s inquiry system or whole reading flow.