bulmaとbuefyを使って2列の入力項目を作成したい

Question

bulmaとbuefyを使ってwebページを作成しています。
入力項目を設定しているのですが、1行につき2つの項目を並べたいのですが
bulma、buefyの機能で実装することができるのでしょうか？

https://buefy.org/documentation/field
上記のサイトでフォームについて調べたりもしましたが、
2項目ごとに<b-field grouped>を設定するしか私には理解ができず…
もっと便利な方法があるのでは？と悩んでいるところです。

また、レスポンシブ対応するために横幅が769px以下になれば
現在の表示のように1行につき1項目の表示となるようにしたいです。

classを追加してcssで個別に実装するしかないのでしょうか？
アドバイスいただければと思います。よろしくお願いいたします。

現在のソース

<template>
    <section>
        <b-field horizontal label="Name">
            <b-input></b-input>
        </b-field>

        <b-field horizontal label="Email">
            <b-input type="email"
                maxlength="30">
            </b-input>
        </b-field>

        <b-field horizontal label="Username">
            <b-input maxlength="30"></b-input>
        </b-field>

        <b-field horizontal label="Password">
            <b-input type="password" maxlength="30"></b-input>
        </b-field>
    </section>
</template>

現在の表示

行いたい表示イメージ

Comments

[m.ts10806]

記述的に「Vue.js」もタグとして必要に思います。

[taiyo-2017]

「Vue.js」タグの追加を行いました。

Answer 1

他の方からの投稿もありませんでしたので自分で調べましたが望む答えはありませんでしたので
cssにて対応をしました。
下記のサイトのような形で<div class="form-group">で囲み、それぞれのラベルと要素のwidthを調整することで実装を行いました。
https://bootsnipp.com/snippets/Okgd