better

src/components/VerbPickerBelow.tsx

@@ -122,7 +122,10 @@ function VerbPickerBelow({ onChange, verb }: {
     }
     const tOptions = (verb?.tenseCategory === "perfect") ? perfectTenseOptions : tenseOptions;
     return <div className="mb-4 mt-3">
-        {verb && <div className="col text-center mb-2">
+        <div style={{ maxWidth: "300px", margin: "0 auto" }}>
+            <div className="d-flex flex-row justify-content-between align-items-center">
+                <div className="h5">Tense:</div>
+                {verb && <div className="mb-2">
                     <ButtonSelect
                         small
                         value={verb.tenseCategory}
@@ -139,8 +142,7 @@ function VerbPickerBelow({ onChange, verb }: {
                         handleChange={onTenseCategorySelect}
                     />
                 </div>}
-        <div style={{ maxWidth: "300px", margin: "0 auto" }}>
-            <div>Tense:</div>
+            </div>
             <Select
                 isSearchable={false}
                 // for some reason can't use tOptions with find here;

src/components/np-picker/NPPicker.tsx

@@ -44,8 +44,8 @@ function NPPicker({ np, onChange, counterPart, asObject }: {
     const clearButton = <button className="btn btn-sm btn-light mb-2" onClick={handleClear}>X</button>;
     return <div>
         {!npType && <div className="d-flex flex-row align-items-center text-center mt-3">
-            <div className="h4 mr-3">
-                NP
+            <div className="h6 mr-3">
+                Choose NP
             </div>
             <div className="ml-3">
                 {npTypes.map((npt) => <div className="mb-2">