Skeleton CSS: place button after input tag

Question

I'm using Skeleton CSS for my simple embedded web server. I have a problem to place a button in the same line / row as an input tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.3/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container">
  <div class="row">
    <div class="one-half column">
      <form action="/clock" method="post">
        <h4>Clock setup</h4>
        <label for="datetime">Set datetime</label>
        <div class="u-full-width">
          <input type="datetime-local" id="datetime" name="datetime" value="2015-01-02T11:42:13" step="1">
          <button type="button" class="u-pull-right" onclick="document.getElementById('datetime').value = dayjs().format('YYYY-MM-DDTHH:mm:ss');">Now</button>
        </div>
        <input class="button-primary" type="submit" value="Submit">
      </form>
    </div>
  </div>
</div>

I don't understand why the "Now" button is placed on the next row, after the submit button. Removing the u-pull-right class or the u-full-width one changes nothing.

I'm using Firefox 101 under Linux Ubuntu 22.04.

Answer 1

The problem is due to the one-half class. Given the different media queries it happens that for some browser widths the half column is too short for both items (even if it does not seem so visually).

For this specific form the solution is to rely on a full-width column:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.3/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container">
  <div class="row">
    <form action="/clock" method="post">
      <h4>Clock setup</h4>
      <label for="datetime">Set datetime</label>
      <div class="row">
        <input type="datetime-local" id="datetime" name="datetime" value="2015-01-02T11:42:13" step="1">
        <button type="button" onclick="document.getElementById('datetime').value = dayjs().format('YYYY-MM-DDTHH:mm:ss');">Now</button>
      </div>
      <input class="button-primary" type="submit" value="Submit">
    </form>
  </div>
</div>